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

【问题标题】：Why do Font Squirrel's @font-face definitions contain two src declarations?为什么 Font Squirrel 的 @font-face 定义包含两个 src 声明？
【发布时间】：2013-09-23 10:54:53
【问题描述】：

在对以跨浏览器友好的方式使用 @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 声明？这个我看不懂。

【问题讨论】：

我相信一个是备用的，以防浏览器由于格式参数而无法理解其他浏览器。
需要注意的一件有趣的事情是，我前几天正在使用 CSS Lint，如果您不使用我在上面链接到的 Fontspring 推荐的防弹语法，它会引发警告。因此，尽管 Font Squirrel 使用了两个 src 声明，但我将只使用一个，因为这是其他人都在做的事情，这对我来说是最有意义的。

标签： css font-face

【解决方案1】：

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

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

它是如何工作的

Internet Explorer

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

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

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

【讨论】：

好答案。谢谢。
没问题。一直在寻找答案，找到了这个问题，继续寻找，当我找到一个好的解释时发布。你的问题给了我很好的提示。

【解决方案2】：

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

【讨论】：

但是第二种格式不是所有浏览器（包括旧的IE）都支持吗？
我不知道哪个浏览器支持哪种格式，我只知道CSS中的这种结构是出于兼容性原因使用的。