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

尝试在fontsquirrel.com

上使用转换器

Answer 3

我正在使用你的代码的精简版本（仅为了清晰起见 - 它没有任何问题）并在许多浏览器中进行测试（webfont是STIX，就像你一样，不是我知道的如果这起作用），我看到一些奇怪的行为：大多数浏览器中的字体回退确实有效，但仅当排除所有斜体字体时（不管是斜体或粗体）。

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

@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 fonts包有错误。

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

Answer 4

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

此外，不是使用@ font-face作为后备字体，而是选择一个你喜欢的字体，而不是声明“arial，helvetica”中的任何顺序，而不是直接回到sans-serif上。这样，每个平台都使用最合适的sans-serif，例如Arial for Windows和Helvetica for OS X等。

Answer 5

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

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

5 个答案: