3

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

}

提前致谢。

4

2 回答 2

2

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 与网络字体的关系比“它不支持它”要复杂一些。它确实支持它们，但在某种程度上使使用它们变得痛苦。

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

Embedded Open Type (EOT) TrueType (TTF) OpenType (OTF) Scalable Vector Graphics (SVG) Web Open Font Format (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 版才支持这种格式。
于 2013-09-20T06:08:10.600 回答
0

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

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

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

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

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

于 2014-06-02T15:50:09.713 回答