CSS Font Face“？#iefix”

Question

我对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');
}

为什么该行＆＃34; url('myfont-webfont.eot?#iefix')＆＃34;有＆＃34; #iefix＆＃34;最后？

Answer 1

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

根据Fontspring（直接来源）：

  

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

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

如果您愿意，可以在此处获取更多信息：https://github.com/stubbornella/csslint/wiki/Bulletproof-font-face。