IE8 字体回退中使用的 Webfonts

Question

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

我知道这在 IE6 和 7 中不起作用，但希望它在 IE8 中起作用，但似乎也不行。

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

提前感谢您的帮助

这是我的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

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

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

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

Answer 2

我正在使用您的代码的精简版本（只是为了清楚起见 - 它没有任何问题）并在许多浏览器中进行测试（网络字体是 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% 的时间里都有效（虽然有时它确实显示字符！）：

@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 3

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

Answer 4

问题可能是“在 Internet Explorer 8 和更早版本中，only one URL value is supported”。

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

Answer 5

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