Eot、 ttf 和 svg 在 font-face 声明中仍然是必需的吗？

小开

最佳答案

2018年10月编辑

Tl; dr: 使用 WOFF2，每个现代浏览器都支持它，因为 IE11不会死(2022年底更新: 微软 事实上在承诺的6月15日 EOL 日期杀死了它，世界对它来说是一个更好的地方) ，而没有是 local()的源指示器，因为你希望每个人使用相同的字体，而不是“一个不同的版本，甚至完全不同的字体，碰巧使用相同的名字”。

剧终。

2016年原始答案

简短的回答: 不。

更详细的回答:

EOT 只适用于 IE8及以下版本(尽管作为琐事: 一直到 IE4)。IE 实际上开创了 webfont) ，SVG 字体作为技术(没有与 OpenType 字体和 SVG 轮廓相混淆) 被遗弃了(在2015年初) ，因为一旦真正的 webfont 开始可用，限制就变得疯狂了。截至2016年。和 WOFF2，如果您想利用更新的更好版本的 WOFF，那么只是刚好成为了 w3的推荐版本(在这个答案出现的时候)。

为了让事情变得更简单，自2016年1月12日起，微软停止了对 IE8及以下版本的支持对 IE9的支持有限: 他们现在只支持每个仍然支持的操作系统的最新可用浏览器，这意味着 Windows XP 不再支持 IE9，因为 XP 本身已不再支持，但 严格来说仍然不情愿地支持，直到 Vista SP2和 Server 2008 R2分别在2017年和2020年结束扩展支持。当然，对于 Windows Server 2008来说，webfont 支持是无关紧要的，大多数仍在使用旧版 Windows 的企业都跳过了 Vista，要么使用 Windows XP (自己承担风险) ，要么使用 Windows 7(我们可以预计，Windows 7将在2016年7月全部变成 Windows 10，其中第29个是最后一次约会，人们可以免费从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 (哦pen) Font (Format) ，一个不那么严格的审查形式意味着一些字体将不能通过系统的 OpenType 验证，可能仍然作为 webfont 工作得很好(由于事实上，并非所有必要的通用性 OpenType 数据是必要的字体工作在只是一个网络上下文)。

最后，你可以选择 WOFF 格式: Format 1，刚刚被称为 WOFF，是较老的格式，使用基于 deflate的压缩，类似于 PNG 压缩; Format 2，被称为 WOFF2，是较新的压缩格式，基于 brotli算法，也允许“切割”成单独的文件，以便在处理支持多种语言的 unicode 字体时优化传递。您不需要同时使用所有文件，因此只需提供那些涵盖特定页面所需 Unicode 范围的文件，并且可以将页面大小和加载时间降低一些。

总之: 为进步而欢呼，只要使用 WOFF (或 WOFF2)。

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

小开

我决定发布我自己的答案有两个原因: 目前公认的答案是有点过分热衷于在现代网络开发中使用 WOFF2和 WOFF 字体堆栈，而没有提及其他因素，它也严重指向官方的生命结束日期，这并不反映什么浏览器版本实际上正在使用在现实世界中。在这个答案中，我将采购 CanIUse.com，这是一个行业标准，用于跟踪这样的事情。

对 WOFF2的支持

WOFF2 在各方面都对 WOFF 进行了改进，2014年之后发布的大多数桌面浏览器都支持 WOFF2，但是大多数移动浏览器只支持 从2018年开始。全球93% 的浏览器都支持它。

对 WOFF 的支持

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

其他桌面浏览器几乎同时也开始支持 WOFF，包括 Firefox 3.6之后的火狐浏览器，Chrome 5之后的 Chrome 浏览器，以及 Safari 5.1之后的 Safari 浏览器(分别于2010年，2011年和2011年发布) ，这使得 TTF 和 OTF¹格式在之前的版本中已经过时。自2013年以来，大多数移动浏览器都支持 WOFF。

注意事项及结论

从这个角度来看，把所有其他格式都看作是不必要的很容易，但是不再被官方支持的软件从来就不是一个好的指示器，它不再被使用。换句话说，全球浏览器版本共享根本不能保证代表你的网站将要使用的人口统计数据。

浏览器的版本份额在不同的人群中可能会有很大的差异: 国家、社会阶层和收入等因素都会严重影响用户使用的设备(因此也会影响浏览器的版本)。作为一个开发人员，考虑一下你正在构建的站点是否会被那些更有可能使用旧版本的人群所使用。

如果你决定这样做，你需要支持比2011年更老的桌面浏览器，或者比2013年更老的移动浏览器，使用完整的字体栈: WOFF2，WOFF，TTF (或 OTF) ，和 EOT。

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

_{(1) TTF 和 OTF 是传统的桌面字体格式，任何支持其中一种的浏览器都支持另一种，所以永远不要同时使用两种格式}

小开

06/20/2022最新情况

My answer is now no longer truly relevant, unless you're working on some really specific use-case where you know truly antiquated browsers that should not be used anymore are still being used anyway (government work?). Keeping this here for posterity, but IE is now finally dead, at least for modern commercial applications.

(编辑移动到顶部)

这更像是2019年的附录。在2019年9月18日这个时候，IE11仍然被大量使用，更不用说其他更过时的软件了。

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

当然，你应该首先加载和支持 woff2，遗留支持只是一个生活的事实，你可能无法摆脱与只有 woff2多年的任何专业努力。

最全面的现代选择可能是 woff2，woff 作为后备，eot 作为 IE。在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、沃夫、 Woff2

这涵盖了除 Opera Mini 之外的所有东西，坦率地说，它不如 IE 6-8值得支持，因为它既是一个噩梦般的支持，又几乎看不到什么用途。

但是，如果您不同意这个评估，您可以添加一个额外的后备线，如需要，就像 woff 线。将 svg 格式添加到上面的示例中不仅支持所有浏览器，而且还有一个理由要求将其包括在内，以满足可访问性的需要。看这里: 可访问性示例