字体声明中是否还需要 eot、ttf 和 svg?

Are eot, ttf, and svg still necessary in the font-face declaration?

到目前为止,我一直在使用 Paul Irish 的 bulletproof font-face syntax

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

2018 年 10 月编辑

tl;dr:使用 WOFF2,每个现代浏览器都支持它,WOFF 回退是因为 IE11 不会死(更新:它最终获得了 2022 年 6 月 15 日的 EOL 日期),并且 没有 local() 源指示器,因为你希望每个人都使用相同的字体,而不是“恰好使用相同名称的不同版本甚至完全不同的字体”。

结束。

2016 年原始答案

简答:没有。

EOT 仅与 IE8 及以下版本相关(尽管是琐事:一直到 IE4。IE 实际上是 webfonts 的先驱),而 SVG 字体作为技术(不是与带有 SVG 轮廓的 OpenType 字体混淆)were abandoned (in early 2015) because the limitations were insane once real webfonts started to become available. As of 2016 you just need WOFF. And WOFF2 if you want to take advantage of the newer better version of WOFF that only just 成为 w3 推荐(在回答这个问题时)。

为了简化操作,as of January 12th 2016, Microsoft ceased support for IE8 and below, with limited support for IE9: they will now only support the latest available browser for each still supported OS, meaning that IE9 is no longer supported for Windows XP, because XP is itself no longer supported, but is technically still—begrudingly—supported until Vista SP2 and Server 2008 R2 reach the end of extended support in 2017 and 2020, respectively. Of course, for Windows Server 2008 webfont support is irrelevant, and most businesses that still use an old version of Windows skipped Vista, being either on Windows XP (at their own peril) or Windows 7 (which we can pretty much expect to all become Windows 10 in July of 2016, the 29th of which is 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 (Open) F ont (Format),一种不太严格的审查形式意味着一些无法通过系统 OpenType 验证的字体可能仍然可以像 web 字体一样正常工作(因为并非所有字体都需要- 通用 OpenType 数据对于字体仅在 Web 上下文中工作是必需的。

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

总之:为进步万岁,就用WOFF(或WOFF2)吧。

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

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

支持 WOFF2

WOFF2 在各个方面都改进了 WOFF,得到 2014 年之后发布的大多数桌面浏览器的支持,但仅 自 2018 年以来[=44​​=] 才开始得到大多数移动浏览器的支持.全球 估计 93% 的浏览器都支持它。

支持 WOFF

WOFF IE9(2011 年发布)中的 Internet Explorer 开始支持 EOT 格式,这使得 EOT 格式对于 2011 年以来发布的 IE 版本已经过时。估计 全球 97% 的浏览器。

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

警告和结论

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

浏览器版本份额在不同人群中可能会有很大差异:国家、社会 class 和收入等因素都会严重影响用户使用的设备(以及浏览器版本)。作为开发人员,请考虑您正在构建的站点是否会被更有可能使用这些旧版本的人群所使用。

如果您确定是这种情况,并且需要支持 2011 年之前的桌面浏览器或 2013 年之前的移动浏览器,请使用完整的字体堆栈:WOFF2、WOFF、TTF(或 OTF)和 EOT。

如果您不需要支持那些古老的浏览器,而且您 很有可能 仍然不需要,只需使用 WOFF2 和 WOFF 作为您的字体堆栈在此.


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

这更像是 2019 年的附录。此时09/18/2019,IE11还在大量使用,更不用说其他比较老旧的软件了。

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

虽然您当然应该首先主要加载和支持 woff2,但传统支持只是生活中的一个事实,您可能无法摆脱 only 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 之外的所有内容,坦率地说,Opera Mini 比 IE 6-8 更不值得支持,因为它既是支持的噩梦,又很少被使用。

但是,如果您不同意此评估,您可以根据需要添加额外的后备行,就像 woff 行一样。将 svg 格式添加到上面的示例中不仅会支持所有浏览器,而且还有一个论点是为了可访问性目的而将其包含在内。看这里:Accessibility example