Question

在以跨浏览器友好的方式对@ 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声明？我无法理解这一点。

Answer 1

这是IE9兼容模式问题。

要获得完整说明，请先查看：http://www.fontspring.com/blog/the-new-bulletproof-font-face-syntax

工作原理

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

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

微软提出了我们本月早些时候介绍的新语法可能存在的问题。即将发布的IE9具有一项功能，允许它在IE7和IE8模式下呈现。在这两种模式中，Microsoft“修复”了影响实际IE7和IE8的解析器错误。此修复程序打破了这些兼容模式的@ font-face语法   ...
  此语法与我们之前的迭代完全相同，并添加了第二个'src：'属性，该属性再次指定EOT。我们将由您决定是否有必要。

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

Answer 2

如果浏览器理解第二个，则第二个覆盖第一个，但不是第一个。这样您就可以为多个浏览器添加兼容性。浏览器A使用第一个SRC和浏览器B，C和D使用第二个SRC语句。

为什么Font Squirrel的@ font-face定义包含两个src声明？

2 个答案: