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

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 无关的位（让担心盗版的人高兴）并允许内部压缩以更好地满足 Web 的需求（使用户和主机满意）。这成为首选格式。

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');
}

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

---

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

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

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

---

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/ 有一个如何使用它的示例。

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

---