问题描述
在对一个跨浏览器友好的方式使用@ font-face的正确语法进行一些研究时，我遇到了以下网站，这是很有道理的：
In doing some research on the "correct" syntax for using @font-face in a cross-browser friendly way, I came across the following site, which makes a lot of sense:
http://www.fontspring.com/blog/the-new-bulletproof-font-face-syntax
但是，如果你看看Font Squirrel提供的任何@ font-face演示代码，@ font-face定义如下：
However, if you look at any of the @font-face demo code provided by Font Squirrel, the @font-face definitions are as follows:
@font-face {
font-family: 'OswaldLight';
src: url('/utils/load_demo_font.php?font=1145/Oswald-Light-webfont.eot');
src: url('/utils/load_demo_font.php?font=1145/Oswald-Light-webfont.eot?#iefix') format('embedded-opentype'),
url('/utils/load_demo_font.php?font=1145/Oswald-Light-webfont.woff') format('woff'),
url('/utils/load_demo_font.php?font=1145/Oswald-Light-webfont.ttf') format('truetype'),
url('/utils/load_demo_font.php?font=1145/Oswald-Light-webfont.svg#OswaldLight') format('svg');
font-weight: normal;
font-style: normal;
}
为什么Font Squirrel演示脚本都包含两个src声明？我不明白这一点。
Why do the Font Squirrel demo scripts all contain two src declarations? I can't understand this.
推荐答案
这是一个IE9兼容模式问题。
It's an IE9 compatibility mode issue.
有关完整说明，请先参阅：
For a full explanation, first see: http://www.fontspring.com/blog/the-new-bulletproof-font-face-syntax
Internet Explorer< 9在src属性的解析器中有一个错误。如果在src中包含多个字体格式，IE将无法加载它并报告404错误。原因是IE尝试加载作为文件的一切之间的开始括号一直到最后一个闭括号。要处理这种错误的行为，您只需首先声明EOT并附加一个问号。问号愚者IE认为其余的字符串是一个查询字符串，只加载EOT文件。
Internet Explorer <9 has a bug in the parser for the src attribute. If you include more than one font format in the src, IE fails to load it and reports a 404 error. The reason is that IE attempts to load as a file everything between the opening parenthesis all the way to the very last closing parenthesis. To deal with that wrong behavior, you merely declare the EOT first and append a single question mark. The question mark fools IE into thinking the rest of the string is a query string and loads just the EOT file.
然后查看后续文章：
如果您不关心兼容性视图，您可以清除第一个 src 右键。
If you don't care about compatibility view you can clear that first src right out.
这篇关于为什么Font Squirrel的@ font-face定义包含两个src声明？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！