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

2018年10月编辑

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

结束。

2016年原始答案

简短的回答：没有。

EOT 仅与 IE8 及以下版本相关（尽管作为琐事：一直到 IE4。IE 实际上是 webfonts 的先驱），以及作为技术的 SVG 字体（不要与带有 SVG 轮廓的 OpenType 字体混淆） were abandoned (in early 2015)，因为一旦真正的网络字体开始可用，这些限制就会变得疯狂。截至 2016 年you just need WOFF。 WOFF2 如果您想利用 only just 成为 w3 推荐的更新更好的 WOFF 版本（在此答案时）。

为方便起见，as of January 12th 2016, Microsoft ceased support for IE8 and below，对 IE9 的支持有限：它们现在将仅支持每个仍受支持的操作系统的最新可用浏览器，这意味着 Windows XP 不再支持 IE9，因为 XP 本身不再受支持，但在 Vista SP2 和 Server 2008 R2 分别在 2017 年和 2020 年结束扩展支持之前，技术上仍然受到支持。当然，对于 Windows Server 2008，webfont 支持是无关紧要的，而且大多数仍在使用旧版本 Windows 的企业都跳过了 Vista，要么使用 Windows XP（自担风险），要么使用 Windows 7（我们几乎可以期待所有这些都成为2016 年 7 月的 Windows 10，其中第 29 个是 the last date 人可以从 7/8.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（开放）字体（格式），一种不太严格的审查形式意味着一些无法通过系统 OpenType 验证通过的字体可能仍然可以像 webfonts 一样正常工作（由于事实上，并非所有必需的通用 OpenType 数据都是字体仅在 Web 上下文中工作所必需的）。

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

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

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

---

2022 年 6 月 20 日更新

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

（编辑将其移至顶部）

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

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

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

最全面的现代选项可能是 woff2，作为后备的 woff 和 IE 的 eot。这会影响 2019/2020 年任何重要用途的所有浏览器

例子：

@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 格式不仅会支持所有浏览器，而且还有一个论据可以将其包含在可访问性目的中。见这里：Accessibility example

---

我决定发布我自己的答案有两个原因：当前接受的答案对于在现代 Web 开发中使用 WOFF2 和 WOFF 字体堆栈有点过分热心，而没有提及其他因素，而且它也严重指向官方的生命终结日期，它不能反映现实世界中实际使用的浏览器版本。在这个答案中，我将采购 CanIUse.com，这是跟踪此类事情的行业标准。

支持 WOFF2

WOFF2 WOFF 在各个方面都得到了改进，2014 年之后发布的大多数桌面浏览器都支持它，但只有自 2018 年开始受到大多数移动浏览器的支持。 估计全球 93% 的浏览器都支持它。

支持 WOFF

WOFF IE9（2011 年发布）中的 Internet Explorer 开始支持，这使得自 2011 年以来发布的 IE 版本过时了 EOT 格式。估计全球 97% 的浏览器都支持它。

其他桌面浏览器大致同时开始支持 WOFF，包括 Firefox 3.6 之后的 Firefox、Chrome 5 之后的 Chrome 和 Safari 5.1 之后（分别于 2010 年、2011 年和 2011 年发布），使得 TTF 和 OTF1 格式在之前的版本中已经过时。自 2013 年以来，大多数移动浏览器都支持 WOFF。

警告和结论

从这个角度来看，很容易将所有其他格式视为不必要的，但不再正式支持的软件从来都不是它不再被使用的良好指标。换句话说，全球浏览器版本共享完全不能保证代表您的网站将被使用的人口统计数据。

浏览器版本份额在人口统计数据中可能会有很大差异：国家、社会阶层和收入等因素都会严重影响用户使用的设备（以及浏览器版本）。作为开发人员，请考虑您正在构建的网站是否会被更有可能使用这些旧版本的人口统计数据使用。

如果您决定是这种情况，并且您需要支持早于 2011 年的桌面浏览器或早于 2013 年的移动浏览器，请使用完整的字体堆栈：WOFF2、WOFF、TTF（或 OTF）和 EOT。

如果您不需要支持那些古老的浏览器，而且您很可能不需要支持，那么从这里开始只需使用 WOFF2 和 WOFF 作为您的字体堆栈。

(1) TTF 和 OTF 是传统的桌面字体格式，任何支持一种的浏览器都支持另一种，所以千万不要同时使用

---