Question

所有其他浏览器 - FF，Chrome，Safari，Opera和IE9 - 都可以正常使用。

但在IE8中它不会加载@ font-face字体 - 但是如果你导航到另一个页面然后返回，则字体呈现/加载正常。

见图：

enter image description here

顶部：导航到另一个页面时看到的文字，底部：从网站首次加载时看到的

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');

}

提前致谢。

Answer 1

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

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

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

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

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

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

有五种类型的网络字体格式：

嵌入式开放式（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有一个错误，它阻止它为同一种字体加载多种格式。幸运的是，你可以使用黑客。

无论如何，这是@ 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之前仅支持此格式。

Answer 2

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

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

通常情况下，使用IE8，webfonts要么工作要么不工作 - 但是我让它们没有加载到某些页面加载（通常但不总是第一次），并且看到它们偶尔不会在页面上加载网站我正在努力。

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

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

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

2 个答案: