在 IE 中使用 @font-face 显示未设置样式的内容

Posted 2023-03-06

【中文标题】在 IE 中使用 @font-face 显示未设置样式的内容

【英文标题】：Flash of unstyled content in IE with @font-face

【发布时间】：2012-02-21 14:44:43

【问题描述】：

我正在开发一个使用 Open Sans 字体作为正文的网站，其中包含 EOT、SVG、WOFF 和 TTF 字体文件以及由 Font Squirrel 生成的样式表。我首先在页眉中包含了我的字体 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;

【参考方案1】：

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

在 'OpenSansRegular' 值之后添加其他字体，以逗号分隔。从右到左：

在右侧，您的字体系列。 serif、sans-serif、monospace 或 cursive（是的，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 可能会导致渲染问题，具体取决于浏览器和操作系统（别名），但它得到了很好的支持，因此您可以缩短字体系列。

【讨论】：

非常感谢 Felipe，这是非常好的建议。它确实有很大帮助，虽然我仍然希望这个问题有一个确定的答案，所以我现在不会给出这个问题，但我赞成，谢谢！

由于缺乏其他解决方案，我认为这种 FOUC 是 IE 的常见行为，所以我给 Felipe 的答案打勾。

【参考方案2】：

隐藏@font-face的FOUC的jQuery插件可以在这里找到：How to know if a font (@font-face) has already been loaded?从这个线程中删除了代码块，因为我一直在那里更新它。