为什么Font Squirrel的@ font-face定义包含两个src声明？ [英] Why do Font Squirrel's @font-face definitions contain two src declarations?

问题描述

在对一个跨浏览器友好的方式使用@ font-face的正确语法进行一些研究时，我遇到了以下网站，这是很有道理的：

http://www.fontspring.com/blog/the-new-bulletproof -font-face-syntax

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.

有关完整说明，请先参阅： http：/ /www.fontspring.com/blog/the-new-bulletproof-font-face-syntax

For a full explanation, first see: http://www.fontspring.com/blog/the-new-bulletproof-font-face-syntax

如何工作

How it works

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.

然后查看后续文章： http://www.fontspring.com/blog/further-hardening-of-the-bulletproof-syntax

我们在本月早些时候介绍的新语法的潜在隐藏问题是由Microsoft提出的。即将发布的IE9具有一个功能，允许它在IE7和IE8模式下渲染。在这两种模式下，Microsoft修复了影响实际IE7和IE8的解析器错误。此修复打破了这些兼容模式的@ font-face语法。

...

此语法与前一次迭代完全相同，添加了一个src： '属性，再次指定EOT。

A potential looming problem with the new syntax we introduced earlier this month was raised by Microsoft. The soon-to-be-released IE9 comes with a feature that allows it to render in both IE7 and IE8 Modes. In these two modes, Microsoft 'fixed' the parser bug that affected the actual IE7 and IE8. This fix breaks the @font-face syntax for those compatibility modes.
...
This syntax is exactly the same as our previous iteration with the addition of a second 'src:' attribute that specifies the EOT again. We'll leave it up to you to decide if this is necessary.

如果您不关心兼容性视图，您可以清除第一个 src 右键。

If you don't care about compatibility view you can clear that first src right out.

这篇关于为什么Font Squirrel的@ font-face定义包含两个src声明？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！