为啥我们应该在字体中包含 ttf、eot、woff、svg、...

Posted 2023-03-15

【中文标题】为啥我们应该在字体中包含 ttf、eot、woff、svg、...

【英文标题】：Why should we include ttf, eot, woff, svg,... in a font-face为什么我们应该在字体中包含 ttf、eot、woff、svg、...

【发布时间】：2012-06-15 16:46:30

【问题描述】：

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

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

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

【参考方案1】：

2019年回答：

仅使用 WOFF2，或者如果您需要旧版支持，则使用 WOFF。 Do not use any other format

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

2012 年的原始答案：

简而言之，font-face 很老了，不过最近才被不止 IE 所支持。

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

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

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

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

2019 年编辑 几年后，woff2 被起草并接受，这提高了压缩率，导致文件更小，并且能够加载单个字体“in部分”，以便支持 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');

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

【讨论】：

woff... 有阻止人们盗版字体的模式？这到底是怎么做到的？

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

WOFF 的重点不是反盗版。 TypeKit 说，“OpenType/CFF 字体相对于 TrueType 字体的两个主要优点是 1) 它们的文件大小更小，以及 2) 它们需要更少的提示信息，以便在允许某种形式的反别名。”

@Zelphir 工具使使用该标志创建可嵌入字体变得困难，而您的普通设计师是编程文盲，并且只有在有人设计带有闪亮的“海盗字体”按钮。此外，如果他们是公司，您可以提出法律指控。如果他们是有博客的人，请与他们交谈，失败，他们的主持人等 - 但请记住，无法购买您字体的人无论如何都不是潜在的客户，所以我会说免费宣传更值得比说服他们把它换成 dafont 上最接近的东西的麻烦。

@Marcel 首先使用支持的格式，因此如果支持，它将使用 WOFF2。

【参考方案2】：

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

看看 [dead URL removed]。 您看到的字体是一种实验性的网络交付 smartfont (woff)，它有数千个组合字符组成复杂的形状。底层文本是罗马化僧伽罗语的简单拉丁代码。 （复制粘贴到记事本看看）。

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

【讨论】：

我在那个网站上没有看到任何特别之处。如果我将它复制到编辑器中（支持 utf8），我仍然只能看到普通文本。 woff 到底是做什么的？

这个答案的三分之二是错误的或不相关的。该链接也已损坏。

【参考方案3】：

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

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

http://sth.name/2014/09/03/Speed-up-webfonts/ 有一个使用示例。

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