ie8 在第一页加载时不渲染/加载@font-face 字体答案

【问题标题】：ie8 not rendering/loading @font-face fonts on first page loadie8 在第一页加载时不渲染/加载@font-face 字体
【发布时间】：2012-11-01 04:41:24
【问题描述】：

所有其他浏览器 - 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');

}

提前致谢。

【问题讨论】：

欢迎来到 SO，胡安。我们通常不在这里签名（参见元：meta.stackexchange.com/questions/5029/… 或常见问题解答：stackoverflow.com/faq）。而且我已经添加了您链接到的图像，所以它更清晰一些。
看看这个问题，可能对你有帮助stackoverflow.com/questions/3082835/…
请注意，该字体不会在 Android 浏览器 2.2 - 4 上呈现，因为它不支持 local()。见：stackoverflow.com/questions/3200069/css-fonts-on-android/…
感谢到目前为止的回复。我还使用 Font Squirrel 重新转换了字体并且没有做出差异。

标签： css internet-explorer-8 fonts web font-face

【解决方案1】：

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

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

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

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

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

然而， IE8 与网络字体的关系比“它不支持它”要复杂一些。它确实支持它们，但在某种程度上使使用它们变得很痛苦。

有五种网络字体格式：

嵌入式开放式 (EOT) TrueType (TTF) 开放式（OTF）可缩放矢量图形 (SVG) Web 开放字体格式 (WOFF) 其中，WOFF 将成为标准。 Chrome、Firefox（自 3.6 起）、Opera、Safari 和 IE9 都支持它。

当然IE8对WOFF一无所知，而是专门支持EOT（公平地说，这主要是因为IE8先于WOFF）。这意味着要使用可以在 IE8 和其他浏览器中显示的网络字体，您必须提供 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 版才支持这种格式。

【讨论】：

【解决方案2】：

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

我还没有得出明确的答案，但我找不到其他人患有与您描述的相同的症状。

一般来说，使用 IE8，webfonts 要么工作要么不工作 - 但我让它们在某些页面加载时不加载（通常但不总是第一个），并且偶尔看到它们不会从一个页面加载到另一个页面我正在开发的网站。

我使用单独的开发服务器，这个问题只发生在那里，而不是生产！

我还没有弄清楚为什么会这样。我的第一直觉是 EOT 字体的 MIME 类型，所以我在我的开发服务器上添加了一个。那并没有解决它。我还没有时间进行全面诊断，而且由于生产更重要，而且我很忙，我可能无法再深入研究了——但也许有人会在一些谷歌的顶部看到这个结果，这将成为他们找出问题的催化剂......

【讨论】：