IE8中字体回退时使用的Web字体

Question

我目前正在尝试在我建立的网站上实现Web字体，我希望将其作为font-family属性的备选项，即如果字符在Arial / Helvetica中不存在，则应该在使用的Web字体中存在。

我知道这不适用于IE6和7，但是我期望它可以在IE8中工作，但似乎并没有。

我想知道是否有人遇到过这个问题，如果在IE8中使用Web字体作为回退字体是否可行，或者是否有人能看出我在代码中做错了什么。

谢谢您提前提供的任何帮助。

以下是我的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; }

- Nick

---

笔误，可能会有影响：/webfonts/talic-webfont.eot -> /webfonts/italic-webfont.eot - Alf Eaton

Answer 1

尝试使用位于fontsquirrel.com的转换器。

- methyl

---

谢谢您的回复，methyl。它最初是使用fontsquirrel.com创建的，所以那不是问题。 - Nick

Answer 2

使用STIX作为回退的好处是什么？

如果它是为了防止UA在不需要时下载字体，那就没有办法了。目前只有Webkit有这种行为。https://gist.github.com/478344 更糟糕的是，即使在CSS中没有引用它们，IE也会下载@font-face中定义的所有字体。

如果是因为STIX没有常规字符，那么，在这里，IE将让您感到困扰。我建议将STIX与免费字体合并，创建一个可交付的字体，其中包含您所需的所有字符。

- JaffaTheCake

---

理想情况下，应将STIX的使用限制在小的<span>或其他元素中。一些JS代码可以查看它，并将非数学Unicode范围中的字符转换为Arial字体。这段代码只需要在IE中使用，并且回退将是该<span>中的所有STIX。 - JaffaTheCake

另一个建议...尝试将Arial作为回退字体，而不是STIX。从STIX中删除常规字符，看看IE是否会回退到默认字体。我很确定IE8会为Web字体回退（我认为只有IE6不会）。 - JaffaTheCake

Answer 3

我正在使用你的代码的简化版本（仅为了清晰起见 - 它没有任何问题），并在许多浏览器中进行测试（Web字体与你一样是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;}

...但这并不总是有效（尽管有时它确实会显示字符！）：

@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中。然后字体回退应该就可以正常工作了。

- dotcode

---

当作为主要字体而不是备用字体使用时，它是否正确应用所有变体字体？ - Alf Eaton

Answer 4

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

- xpepermint

Answer 5

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

此外，与其使用@font-face作为备用字体，不如选择您喜欢的字体，并且不要声明“arial，helvetica”以任何顺序，而是直接回退到sans-serif。这样，每个平台都可以使用最合适的sans-serif字体，例如Windows的Arial和OS X的Helvetica等。

- Marcel