为什么在font-face中应该包含ttf、eot、woff、svg等格式的字体文件？

Question

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

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

如果它们对不同的浏览器很特殊，为什么它们的数量比主要网络浏览器的数量还要多？

- user16948

Answer 1

2019年的答案：

只使用WOFF2格式，或者如果需要支持老旧浏览器，则使用WOFF。不要使用其他格式

(SVG和EOT是已经被淘汰的格式，TTF和OTF是完整的系统字体，不应该用于网络目的)

@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的支持情况。

- Rich Bradshaw

---

“woff”有一种模式可以防止字体被盗版，这是怎么实现的呢？ - Mark Amery

TTF 不应比 WOFF 更轻。WOFF 是 TrueType - OpenType 字体（ttf 和 otf）的一种压缩形式。 - toto_tico

WOFF的目的不在于反盗版。TypeKit表示：“OpenType/CFF字体相对于TrueType字体的两个主要优势是：1）它们具有更小的文件大小，2）为了在支持某种形式的抗锯齿的环境中良好渲染，需要远少于TrueType字体所需的提示信息。” - Michael McGinnis

工具使得带有该标志的可嵌入字体难以创建，而一般的设计师不懂编程，只能在设计了一个带有“盗版字体”按钮的 Mac 应用程序后删除该标志。此外，如果他们是公司，你可以提起法律诉讼。如果他们只是一个博客用户，可以尝试与他们交谈，或者联系他们的主机等 - 但请记住，那些无法购买你的字体的人并不是潜在的客户，因此我认为免费宣传价值更高，胜过说服他们只是将其替换为 dafont 上最接近的字体所带来的麻烦。 - Camilo Martin

@Marcel 首选支持的格式将被使用，因此如果支持，将使用 WOFF2。 - gsnedders

Answer 2

Woff是TrueType-OpenType字体的压缩（打包）形式。它很小，可以像图形文件一样通过网络传输。最重要的是，这样字体就完整地保留下来，包括渲染规则表，而很少有人关心它们，因为他们只使用拉丁文。

请查看[已删除死链]。 您看到的字体是实验性的智能字体（woff），具有成千上万个组合字符，形成复杂的形状。底层文本是罗马化的僧伽罗文简单的拉丁代码。（复制并粘贴到记事本中查看）。

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

- user2422970

---

我看不出那个网站有什么特别之处。如果我将其复制到一个支持UTF8的编辑器中，我仍然只能看到普通文本。WOFF具体是做什么的？ - Zelphir Kaltstahl

这个回答中三分之二的内容是错误或者不相关的。另外那个链接已经失效了。 - Yay295

Answer 3

WOFF 2.0是基于Brotli压缩算法和其他改进的技术在WOFF 1.0的基础上进行优化使字体文件大小减少了30%以上，已被Chrome、Opera和Firefox支持。

http://en.wikipedia.org/wiki/Web_Open_Font_Format http://en.wikipedia.org/wiki/Brotli

http://sth.name/2014/09/03/Speed-up-webfonts/提供了一个如何使用WOFF 2.0的例子。

基本上您只需要将woff2文件的src URL添加到代码中并指定woff2格式即可。请注意，要确保在woff格式之前指定，浏览器会使用它支持的第一个格式。

- Jyrki Alakuijala