css - ie8 在第一页加载时不呈现/加载@font-face 字体

Question

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

}

提前致谢。

Answer 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) 真实字体 (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)，它们存储在我网站的“字体”文件夹中。

• 如果您想知道我为什么包含 SVG 格式，答案是因为移动版 Safari(iPhone/iPad)在 4.1 版之前只支持这种格式。