我们为什么要在字体中包含ttf，eot，woff，svg ...

Question

在 CSS3 font-face，有包括如多发性字体类型ttf，eot，woff，svg和cff。

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

如果它们专用于不同的浏览器，为什么它们的数量大于主要Web浏览器的数量？

Answer 1

在2019年回答：

仅使用WOFF2，或者如果需要传统支持，请使用WOFF。不要使用任何其他格式

（svg和eot是死的格式，ttf并otf有完整的系统字体，并且不应该被用于Web的目的）

2012年的原始答案：

简而言之，font-face很老，但是直到最近，IE才支持它。

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

• ttf并且otf是正常的旧字体，因此有些人感到恼火，这意味着任何人都可以免费下载昂贵的许可字体。

• 随着时间的流逝，SVG 1.1新增了一个“字体”一章，该章解释了如何仅使用SVG标记为字体建模，人们开始使用它。花费了更多时间，事实证明，与仅使用常规字体格式相比，它们 绝对可怕 ，并且SVG 2明智地再次删除了整个章节。

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

• 2019 edit 几年后，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');
}