font-face 声明中是否还需要 eot、ttf 和 svg？

Question

到目前为止，我一直在使用 Paul Irish 的 防弹字体语法

但我只是在看 caniuse 上对 .woff 和 .woff2 文件的支持，它说 IE9+ 支持 woff。大多数关于这个主题的文章都来自 2009 年左右，而在撰写本文时已经是整整 7 年前。当 woff 现在得到如此广泛的支持时，我们真的需要继续声明 ttf、otf、eot 和 svg 吗？

原文由 paulcpederson 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

2018年10月编辑

tl；博士：使用 WOFF2，每个现代浏览器都支持它，使用 WOFF 后备，因为 IE11 不会死（更新：它最终的 EOL 日期为 2022 年 6 月 15 日），并且 没有 local() 源指示器，因为您希望每个人都使用相同的字体，而不是“碰巧使用相同名称的不同版本甚至完全不同的字体”。

结束。

2016年原始答案

简短的回答：没有。

EOT 仅与 IE8 及以下版本相关（尽管作为琐事：一直到 IE4。IE 实际上开创了 webfonts），并且 SVG 字体作为技术（ 不要 与带有 SVG 轮廓的 OpenType 字体混淆） 被放弃（ 在 2015 年初）因为一旦真正的网络字体开始可用，这些限制就变得疯狂了。截至 2016 年 ，您只需要 WOFF 。 WOFF2 如果您想利用 刚刚 成为 w3 推荐的更新更好的 WOFF 版本（在此答案时）。

为方便起见， 自 2016 年 1 月 12 日起，Microsoft 停止了对 IE8 及以下 版本的支持，对 IE9 的支持有限：他们现在将只支持每个仍受支持的操作系统的最新可用浏览器，这意味着 Windows XP 不再支持 IE9 ，因为 XP 本身不再受支持，但在 技术上 仍然（勉强地）支持，直到 Vista SP2 和 Server 2008 R2 分别在 2017 年和 2020 年结束扩展支持。当然，对于 Windows Server 2008，webfont 支持是无关紧要的，大多数仍然使用旧版本 Windows 的企业都跳过了 Vista，要么使用 Windows XP（自担风险），要么使用 Windows 7（我们几乎可以期望它们都成为Windows 10 于 2016 年 7 月发布，其中 29 日是人们可以免费从 ⁷⁄₈.1（但不是 8）升级到 10 的最后日期）。

（2017 年 4 月编辑：Windows Vista SP2 本月停止支持，因此现在正式不再支持 IE9）

至于 TTF/OTF，您不想在线使用这些，就像您不想使用 TIFF 图像而不是 JPG 或 PNG：即使 WOFF“只是”围绕 TTF/OTF 数据的薄包装，WOFF/ WOFF2 允许压缩数据，而普通 OpenType 不允许。

此外，TTF/OTF 是通用字体（对于支持 OpenType 的系统），因此需要更多地检查其正确性，尤其是 IE 版本。使用 WOFF ，它作为文件类型明确表明这是一个 Web（ O pen） 字体（F 格式），一种不太严格的审查形式意味着一些无法通过系统 OpenType 验证通过的字体可能仍然可以正常工作，因为webfonts（由于并非所有通用性 OpenType 数据都是字体在 Web 上下文中工作所必需的）。

最后，您可以选择 WOFF 格式：格式 1，简称 WOFF，是较旧的格式，使用基于 deflate 的压缩，类似于 PNG 压缩；格式 2，称为 WOFF2，是基于 brotli 算法的压缩的较新格式，并且还允许在处理支持多种语言的 unicode 字体时将字体“分割”到单独的文件中以优化交付.您不需要同时使用所有文件，因此只提供那些覆盖特定页面所需的 unicode 范围的文件，并且您可以将页面大小和加载时间减少一点。

结论：为进步而欢呼，只需使用 WOFF（或 WOFF2）。

当然，请记住使用 format() 值指明您的 @font-face 源的格式。

原文由 Mike ‘Pomax’ Kamermans 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

2022 年 6 月 20 日更新

我的答案现在不再真正相关，除非您正在处理一些非常具体的用例，您知道不应该再使用的真正过时的浏览器仍然在使用（政府工作？）。将其保留在这里以供后代使用，但 IE 现在终于死了，至少对于现代商业应用程序而言。

（编辑将其移至顶部）

这更像是 2019 年的附录。在这一点 09/18/2019，IE11 仍然大量使用，更不用说其他更过时的软件了。

因此，在一年前的最新编辑中，接受的最高投票答案是 错误 的，您只需要 woff2。至少你需要 woff2 和 woff，你可能需要一个更通用的备份选项，即使它不像 svg 那样理想。

当然，您首先应该首先加载和支持 woff2，但遗留支持只是生活中的一个事实，在任何专业努力中，您可能无法再过几年 只使用 woff2。

最全面的现代选项可能是 woff2，作为后备的 woff 和 IE 的 eot。这会影响 ²⁰¹⁹⁄₂₀₂₀ 年任何重要用途的所有浏览器

例子：

 @font-face {
  font-family: "yourFontHere";
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("../fonts/yourFontHere.eot");
  src: url("../fonts/yourFontHere.eot?#iefix") format("ie9-skip-eot"),
  url("../fonts/yourFontHere.woff2") format("woff2"),
  url("../fonts/yourFontHere.woff") format("woff");
}

这就是一个普通的综合字体外观声明的样子。

请参阅以下内容： Eot 、 Woff 、 Woff2

这涵盖了除 Opera Mini 之外的所有内容，坦率地说，它比 IE 6-8 更不值得支持，因为它既是支持的噩梦，又很少使用。

但是，如果您不同意此评估，您可以根据需要添加额外的后备线，就像 woff 线一样。在上面的示例中添加 svg 格式不仅会支持所有浏览器，而且还有一个论据可以将其包含在可访问性目的中。请参阅此处： 可访问性示例

原文由 Yakri 发布，翻译遵循 CC BY-SA 4.0 许可协议