IE8 字体后备中使用的 Web 字体

Question

我目前正在尝试在我构建的网站上实现 webfonts，我想将其用作 font-family 属性内的后备，即如果字符未以 Arial / Helvetica 表示，那么它应该在使用的 webfont 内。

我意识到这在 IE6 和 7 中不起作用，但希望它能在 IE8 中起作用，但它似乎也不起作用。

我只是想知道是否有人曾经遇到过这个问题，以及是否可以在 IE8 中使用网络字体作为后备字体，或者是否有人可以看到我只是在代码中做错了什么。

预先感谢您的帮助

这是我的CSS代码：

@font-face {
    font-family: 'stix';
    src: url('/webfonts/webfont.eot');
    src: local('☺'), url('/webfonts/webfont.woff') format('woff'), url('/webfonts/webfont.ttf') format('truetype'), url('/webfonts/webfont.svg#webfont3hGwcDt1') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'stix';
    src: url('/webfonts/bold-webfont.eot');
    src: local('☺'), url('/webfonts/bold-webfont.woff') format('woff'), url('/webfonts/bold-webfont.ttf') format('truetype'), url('/webfonts/bold-webfont.svg#webfontJse4ZhT8') format('svg');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'stix';
    src: url('/webfonts/talic-webfont.eot');
    src: local('☺'), url('/webfonts/italic-webfont.woff') format('woff'), url('/webfonts/italic-webfont.ttf') format('truetype'), url('/webfonts/italic-webfont.svg#webfonthDLBqRGk') format('svg');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'stix';
    src: url('/webfonts/bold_italic-webfont.eot');
    src: local('☺'), url('/webfonts/bold_italic-webfont.woff') format('woff'), url('/webfonts/bold_italic-webfont.ttf') format('truetype'), url('/webfonts/bold_italic-webfont.svg#webfontnuMlJc7x') format('svg');
    font-weight: bold;
    font-style: italic;

}

body { font-family: arial, helvetica, clean, stix, sans-serif}
body.ie6 #content, body.ie6 .popup { font: 15px/1.6em stix; }

Answer 1

尝试使用 fontsquirrel.com 上的转换器

Answer 2

使用 STIX 作为后备有什么好处？

如果它是为了阻止 UA 下载字体（除非需要），那么你就不走运了，目前只有 webkit 具有该行为 https ://gist.github.com/478344 更糟糕的是，IE 将下载 @font-face 中定义的所有字体，即使它们没有在 CSS 中的其他任何地方引用。

如果是因为 STIX 没有常规字符，那么 IE 就会把你搞砸了。我建议将 STIX 与免费字体合并，以创建一个包含您需要的所有字符的可交付成果。

Answer 3

我正在使用您的代码的精简版本（只是为了清楚起见 - 它没有任何问题）并在许多浏览器中进行测试（网络字体是 STIX，就像您一样，但我不知道这是否可以播放）一个角色），并且我看到一些奇怪的行为：大多数浏览器中的字体回退确实有效，但只有当排除字体的所有斜体变体（无论是斜体还是粗体） ）。

即，这有效（100％的时间），浏览器对于那些不是 arial 的字符回退到 STIX：

@font-face {
    font-family: 'stix';
    src: url('stixgeneral-webfont.eot');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'stix';
    src: url('stixgeneralbol-webfont.eot');
    font-weight: bold;
    font-style: normal;
}
body {font-family: arial, stix, sans-serif;}

...但这确实不 100％的时间有效（尽管有时< strong>确实显示字符！）：

@font-face {
    font-family: 'stix';
    src: url('stixgeneral-webfont.eot');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'stix';
    src: url('stixgeneralitalic-webfont.eot'); /* note - italic font variant */
    font-weight: normal;
    font-style: italic;
}
body {font-family: arial, stix, sans-serif;}

出现这种情况的原因似乎是 STIX 字体包有错误。

为了解决这个问题，请在 FontForge 中打开 STIX 字体包并保存 - FontForge 会通知您错误。修复这些问题，然后导入到 FontSquirrel 中。字体后备现在应该可以正常工作。

Answer 4

问题可能是“在 Internet Explorer 8 及更早版本中，仅支持一个 URL 值"。

另外，不要使用 @font-face 作为后备字体，而是选择一种您喜欢的字体，并且不要按照任何顺序声明“arial, helvetica”，而是直接使用 sans-serif。这样，就可以在各个平台上使用最合适的无衬线字体，例如 Windows 的 Arial 和 OS X 的 Helvetica 等。

Answer 5

顺便说一句... IE 将尝试加载 SVG 格式，因此您应该在 svg 之后定义 EOT src！ （IE 错误）。