27

我有一个关于 css @font-face 的问题。我正在使用本网站（http://www.fontspring.com/blog/the-new-bulletproof-font-face-syntax）中的以下代码。

@font-face {
font-family: 'MyFontFamily';
src: url('myfont-webfont.eot?#iefix') format('embedded-opentype'), 
     url('myfont-webfont.woff') format('woff'), 
     url('myfont-webfont.ttf')  format('truetype'),
     url('myfont-webfont.svg#svgFontName') format('svg');
}

为什么最后一行“ url('myfont-webfont.eot?#iefix')”有“ #iefix”？

4

1 回答 1

58

这是因为 IE8 及以下版本解释字体声明的方式。在这些版本的IE中正常url('myfont-webfont.eot')会导致404 Server错误；添加?#iefix修复服务器问题。（出于同样的原因，IE 有条件样式表。）

根据 Fontspring （直接来自源）：

Internet Explorer <9 在 src 属性的解析器中有一个错误。如果您在 src 中包含多个字体格式，IE 将无法加载它并报告 404 错误。原因是 IE 试图将左括号之间的所有内容作为文件加载到最后一个右括号。要处理这种错误行为，您只需先声明 EOT 并附加一个问号。问号使 IE 误以为字符串的其余部分是查询字符串并仅加载 EOT 文件。其他浏览器遵循规范，根据 src 级联和格式提示选择他们需要的格式。

所以必要的部分是?; 我想这#iefix只是程序员的语义线，浏览器不会以任何特定方式解释。

如果您愿意，这里有更多信息：https ://github.com/stubbornella/csslint/wiki/Bulletproof-font-face 。

于 2013-01-08T02:45:45.993 回答