67

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

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

4

3 回答 3

113

2018年10月编辑

tl;dr：使用 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（我们几乎可以期望它们都成为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 ( O pen) F ont ( F格式)，一种不太严格的审查形式意味着一些无法通过系统 OpenType 验证通过的字体可能仍然可以正常工作webfonts（由于并非所有通用性 OpenType 数据都是字体在 Web 上下文中工作所必需的）。

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

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

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

于 2016-03-20T04:58:18.790 回答
2

这更像是 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 格式不仅会支持所有浏览器，而且还有一个论据可以将其包含在可访问性目的中。请参阅此处：可访问性示例

于 2019-09-18T14:25:46.623 回答
2

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

支持 WOFF2

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

支持 WOFF

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

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

警告和结论

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

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

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

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

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

于 2019-09-16T23:02:33.447 回答