IE8在首次加载页面时无法呈现/加载@font-face字体。

Question

除IE8之外的其他浏览器，如FF、Chrome、Safari、Opera和IE9都可以正常工作。

但在IE8中，@ font-face字体无法加载 - 但如果您导航到另一页，然后返回，则字体会呈现/加载正常。

请参见下图：

顶部：导航到另一页后看到的文本，底部：站点首次加载时看到的文本

CSS代码：

@font-face {
    font-family: 'FontNameHere';
    src: url('/font/webfont.eot');
    src: local('?'), url('/font/webfont.woff') format('woff'),
    url('/font/webfont.ttf') format('truetype'),
    url('/font/webfont.svg#webfontkKNhbsUZ') format('svg');

}

预先感谢。

- Juan

---

欢迎来到SO，Juan。我们通常不在这里签名（请参见元数据：http://meta.stackexchange.com/questions/5029/are-taglines-signatures-disallowed或FAQ：http://stackoverflow.com/faq）。我已经添加了你链接的图片，这样就更清晰了。 - Jude Fisher

请查看这个问题，可能会对您有所帮助。https://dev59.com/JHA75IYBdhLWcg3w0st- - huMpty duMpty

提醒一下，字体在Android浏览器2.2-4上无法呈现，因为它不支持“local()”。请参见：https://dev59.com/M3A75IYBdhLWcg3wm6ex#4520467 - Patrick

到目前为止，非常感谢大家的回复。我也使用Font Squirrel重新转换了字体，但没有产生影响。 - Juan

Answer 1

Internet Explorer 9+、Firefox、Chrome、Safari和Opera支持WOFF（Web开放字体格式）字体。

Firefox、Chrome、Safari和Opera支持TTF（True Type Fonts）和OTF（OpenType Fonts）类型的字体。

Chrome、Safari和Opera还支持SVG字体/形状。

Internet Explorer还支持EOT（嵌入式开放字体）字体。

注意：Internet Explorer 8及更早版本不支持@font-face规则。

然而， IE8与web字体的关系比“不支持”要复杂一些。它实际上支持它们，但使用它们很麻烦。

有五种类型的web字体格式：

嵌入式开放字体（EOT） TrueType（TTF） OpenType（OTF） 可缩放矢量图形（SVG） Web开放字体格式（WOFF） 在这些字体格式中，WOFF将成为标准。它受到Chrome、Firefox（自3.6版以来）、Opera、Safari和IE9的支持。

当然，IE8对WOFF一无所知，只支持EOT（公平地说，这主要是因为IE8先于WOFF）。这意味着要使用可以在IE8和其他浏览器中显示的web字体，您必须提供EOT和WOFF格式。

更糟糕的是，IE8有一个错误，阻止它加载同一字体的多个格式。幸运的是，您可以使用一个hack来解决这个问题。

无论如何，这里是@font-face的跨浏览器CSS：

@font-face {
    font-family: 'OpenSans';
    src: url('fonts/OpenSans-Light-webfont.eot');
    src: url('fonts/OpenSans-Light-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/OpenSans-Light-webfont.woff') format('woff'),
         url('fonts/OpenSans-Light-webfont.ttf') format('truetype'),
         url('fonts/OpenSans-Light-webfont.svg#OpenSansLight') format('svg');
    font-weight: 300;
    font-style: normal;
}

在这个例子中，我使用了一种名为Open Sans的字体及其多种格式（EOT、WOFF、TTF和SVG），它们存储在我的网站上的“fonts”文件夹中。

如果你想知道为什么我包括了SVG格式，答案是因为移动Safari（iPhone/iPad）直到4.1版本只支持这种格式。

- Sudharsun

Answer 2

我知道这是一个老问题，但它在谷歌搜索中排名很高，所以我认为在这里添加一个答案可能有一些价值...

我还没有得出最终的答案，但我无法找到其他人遇到您描述的相同症状。

通常，在IE8中，Web字体要么有效，要么无效 - 但我发现它们在某些页面加载时（通常但不总是第一次），无法加载，并且在我正在处理的网站上从一页到另一页时会间歇性地无法加载。

我使用单独的开发服务器，这个问题只会在那里出现，而不会在生产环境中出现！

我还没有弄清楚为什么会出现这种情况。我的第一反应是EOT字体的MIME类型，因此我在我的开发服务器上添加了一个。但那并没有解决问题。我还没有时间进行全面诊断，由于生产环境更重要，而且我非常忙碌，所以可能暂时无法深入挖掘 - 但也许有人会在谷歌搜索结果的顶部看到这篇文章，这将成为他们解决问题的催化剂...

- honestbleeps