css - 使用@font-face 在 IE 中闪烁无样式的内容

Question

我在一个网站上工作，该网站的正文文本使用 Open Sans 字体，使用 Font Squirrel 生成的 EOT、SVG、WOFF 和 TTF 字体文件和样式表。我首先在我的页眉中包含了我的字体 CSS。但是，当我在 IE7、IE8 甚至 IE9 中查看该站点时，我会在 Open Sans 启动之前看到 Times Roman 中的所有内容。这在其他浏览器中不会发生。

谁能建议我阻止这种情况发生的方法？这是我为该字体使用的 Font Squirrel CSS:

 @font-face {
    font-family: 'OpenSansRegular';
    src: url('opensans-regular-webfont.eot');
    src: url('opensans-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('opensans-regular-webfont.woff') format('woff'),
         url('opensans-regular-webfont.ttf') format('truetype'),
         url('opensans-regular-webfont.svg#OpenSansRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

Answer 1

您在下载自定义字体时看到的内容并未在上述代码中定义。它在整个 CSS 代码中的其他 font-family 说明中定义。

在“OpenSansRegular”值后添加其他字体，以逗号分隔。从右到左:

• 在右侧，您的字体系列。 serif、sans-serif、monospace 或 cursive(yay Comic Sans!) .在这里，OpenSansSth 是……sans-serif。
  您的浏览器默认使用这些字体，Arial、Verdana 或 Linux 中的其他字体，等等。当你不为他选择时，这是用户的选择。默认系列是 serif，Windows 中的默认字体是“Times New Roman”。这就是为什么您将 Times New Roman 视为 IE 中的 FOUC。
• 然后是尽可能接近您的自定义字体的网络安全字体。在这里它是一种无衬线字体，如 Verdana 或 Arial。也许 sans-serif 和 Verdana 是同一种东西，但你永远不确定(尤其是对于 Linux 用户)，所以添加两者
• 在您的自定义字体和网络安全字体之间，您可以添加可以安装在许多操作系统中但不像 MS Office、Adobe Reader、OS X、Adobe Creative Suite 等安装的字体那样网络安全的字体您会在 10% 到 90% 的访客计算机中找到它们，但不是 100%。不是每个人都安装 Creative Suite(只有网络专业人士和其他设计师)和 MS Office(我使用 LibreOffice)并且在 XP、Vista 和 7 中安装了不同的字体
• 最后，最左边的值将是您为自定义字体指定的自定义名称。 OpenSansRegular 在您的站点中

例如:

         nav { font-family: 'Custom_at-font-face','closest font to the font-face one but certainly rarely found on computers by default', 'less close, 'not close but same family', Verdana,sans-serif;
         }

带百分比的兼容性表(可能有点旧)http://www.codestyle.org/css/font-family/
不要使用 10 个值，3 到 6 个就足够了 ;) 在 2012 年，@font-face 可能会导致渲染问题，具体取决于浏览器和操作系统(别名)，但它得到了很好的支持，因此您可以缩短字体系列。