2

在对以跨浏览器友好的方式使用 @font-face 的“正确”语法进行一些研究时，我遇到了以下站点，这很有意义：
http ://www.fontspring.com/blog/ the-new-bulletproof-font-face-syntax

但是，如果您查看 Font Squirrel 提供的任何 @font-face 演示代码，@font-face 定义如下： 

@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 声明？我无法理解这一点。

4

2 回答 2

4

这是一个IE9兼容模式问题。

完整的解释，先看：http ://www.fontspring.com/blog/the-new-bulletproof-font-face-syntax

这个怎么运作

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

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

微软提出了我们本月早些时候引入的新语法的潜在问题。即将发布的 IE9 带有一项功能，可以在 IE7 和 IE8 模式下进行渲染。在这两种模式下，微软“修复”了影响实际 IE7 和 IE8 的解析器错误。此修复破坏了这些兼容模式的 @font-face 语法。
...
这种语法与我们之前的迭代完全相同，只是添加了第二个“src:”属性，再次指定 EOT。我们将由您决定是否有必要这样做。

如果您不关心兼容性视图，您可以先将其清除src。

于 2013-09-20T14:59:15.557 回答
0

如果浏览器理解第二个而不是第一个，则第二个覆盖第一个。通过这种方式，您可以添加对多个浏览器的兼容性。浏览器 A 使用第一个 SRC，浏览器 B、C 和 D 使用第二个 SRC 语句。

于 2013-02-04T13:23:36.143 回答