Question

在 CSS3 font-face中，包含多种字体类型，例如ttf，eot，woff，svg和{ {1}}。

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

如果它们对不同的浏览器有特殊性，为什么它们的数量大于主要网络浏览器的数量？

Answer 1

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

（svg和eot为死格式，ttf和otf为完整系统字体，不应用于网络目的）

简而言之，font-face很老了，但最近才得到IE以上的支持。

eot - 他们发明了规范，但是eot是专有解决方案。
ttf和otf是普通的旧字体，因此有些人对此感到恼火，这意味着任何人都可以免费下载昂贵的许可字体。
时间过去了，SVG 1.1添加了一个“字体”章节，解释了如何纯粹使用SVG标记对字体进行建模，并且人们开始使用它。与普通的字体格式相比，更多的时间过去了，事实证明它们绝对可怕，SVG 2明智地删除了整个章节。
然后，woff由具有相当多领域知识的人发明，这使得以一种抛弃对系统安装至关重要的位的方式托管字体成为可能，但是无关紧要网络（让人们担心盗版感到高兴）并允许内部压缩以更好地满足网络需求（使用户和主机感到高兴）。这将成为首选格式。
2019年修改几年后，woff2被起草并接受，这可以改善压缩，从而导致更小的文件，以及加载单一字体的功能“部分”，以便支持20个脚本的字体可以作为“块”存储在磁盘上，而浏览器可以根据需要自动加载“部分”字体，而不需要预先传输整个字体，进一步改善排版体验。

如果您不想支持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');
}

检查对woff2的支持

Answer 2

Woff是TrueType - OpenType字体的压缩（压缩）形式。它很小，可以像图形文件一样通过网络传送。最重要的是，这种方式完全保留了字体，包括很少人关心的渲染规则表，因为它们只使用拉丁文字。

看看[删除了死网址]。你看到的字体是一个实验性网站，它提供了smartfont（woff），它有数千个组合字符，形成复杂的形状。基础文本是罗马化Singhala的简单拉丁语代码。（复制并粘贴到记事本并查看）。

只有woff可以做到这一点，因为没有人拥有这种字体，但它可以在任何地方看到（Mac，Win，Linux甚至所有浏览器除了IE之外的智能手机上.IE不完全支持Open Types）。

Answer 3

WOFF 2.0基于Brotli压缩算法和WOFF 1.0的其他改进，文件大小减少了30％以上，Chrome，Opera和Firefox都支持。

基本上，您将src url添加到woff2文件并指定woff2格式。在woff格式之前使用它是很重要的：浏览器将使用它支持的第一种格式。