css - 为什么我们应该在字体中包含 ttf、eot、woff、svg...

Question

在 CSS3 font-face 中，包含了多种字体类型，如 ttf、eot、woff、 svg 和 cff。

我们为什么要使用所有这些类型？

如果它们是针对不同浏览器的，为什么它们的数量比主流网络浏览器的数量多？

Answer 1

2019年回答:

仅使用 WOFF2，或者如果您需要传统支持，请使用 WOFF。 Do not use any other format

(svg 和 eot 是死格式，ttf 和 otf 是完整的系统字体，不应该用于网络目的)

2012 年的原始答案:

总之，font-face很老了，只是最近才被超过IE支持。

• eot 是早于 IE9 的 Internet Explorer 所必需的 - 他们发明了规范，但 eot 是专有解决方案。

• ttf 和 otf 是普通的旧字体，所以有些人很生气，因为这意味着任何人都可以免费下载许可证昂贵的字体。

• 时间过去了，SVG 1.1 添加了一个“字体”章节，解释了如何完全使用 SVG 标记来建模字体，并且人们开始使用它。更多的时间过去了，事实证明，与普通字体格式相比，它们绝对糟糕，SVG 2 再次明智地删除了整个章节。

• 然后，woff 由具有相当多领域知识的人发明，这使得以丢弃对系统安装至关重要的位的方式托管字体成为可能，但与网络无关(让人们担心盗版快乐)并允许内部压缩以更好地满足网络的需求(让用户和主机快乐)。这成为首选格式。

• 2019 edit 几年后，woff2 起草并被接受，这提高了压缩率，导致文件更小，并且能够加载“分部分”的单一字体，这样支持 20 个脚本的字体可以作为“ block ”存储在磁盘上，浏览器可以根据需要自动“分部分”加载字体，而不需要将整个字体向上传输进一步提升排版体验。

如果您不想支持 IE 8 及更低版本、iOS 4 及更低版本以及 android 4.3 或更早版本，那么您可以只使用 WOFF(以及 WOFF2，一种压缩率更高的 WOFF，适用于支持的最新浏览器它。)

@font-face {
  font-family: 'MyWebFont';
  src:  url('myfont.woff2') format('woff2'),
        url('myfont.woff') format('woff');
}

可以在 http://caniuse.com/woff 查看对 woff 的支持
可以在 http://caniuse.com/woff2 查看对 woff2 的支持