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

Question

在 CSS3

font-face

中，包含多种字体类型，例如

ttf

、

eot

、

woff

、

svg

和

cff

。

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

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

Answer 1

2019年答案：

仅使用 WOFF2，或者如果您需要旧版支持，请使用 WOFF。 请勿使用任何其他格式

（

svg

和

eot

是死格式，

ttf

和

otf

是完整的系统字体，不应用于网络目的）

2012年的原始答案：

总之，font-face已经很老了，但直到最近才被超过IE支持。

早于 IE9 的 Internet Explorer 需要

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

可以在 

http://caniuse.com/woff

 查看对 

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

 查看对 

woff2 的支持

Answer 2

看看

这个网站

。 您看到的字体是一种实验性网络交付的 smartfont (woff)，它具有数千个组合字符，可形成复杂的形状。底层文本是罗马化的僧伽罗语的简单拉丁代码。 （复制粘贴到记事本即可查看）。 只有 woff 可以做到这一点，因为没有人拥有这种字体，但它可以在任何地方看到（Mac、Win、Linux 甚至智能手机上除 IE 之外的所有浏览器。IE 不完全支持 Open Types）。

Answer 3

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 格式之前添加此内容非常重要：浏览器将使用它支持的第一种格式。