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

发布于06月13日

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

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

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

推荐答案

仅使用WOFF2，或者如果需要传统支持，请使用WOFF.Do not use any other format

(svg和eot是死格式，ttf和otf是全系统字体，不应用于Web目的)

简而言之，font-face已经很老了，但直到最近才得到了超过IE的支持.

对于比IE9更老的Internet Explorer来说，eot是必需的--他们发明了规范，但EOT是一个专有解决方案.
ttf和otf是普通的旧字体，所以有些人很恼火，因为这意味着任何人都可以免费下载昂贵的授权字体.
随着时间的推移，SVG1.1添加了一个"字体"章节，解释如何完全使用SVG标记对字体建模，人们开始使用它.更多的时间过go 了，与普通字体格式相比，它们是absolutely terrible，SVG 2明智地再次删除了整个章节.
然后，拥有相当多领域知识的人发明了woff，这使得以一种丢弃对系统安装至关重要的比特的方式托管字体成为可能，但与网络无关(让人们担心盗版会带来快乐)，允许内部压缩更好地满足网络需求(让用户和主机感到快乐).这成为首选格式.
2019 edit几年后，woff2被起草和接受，这改进了压缩，产生了更小的文件，以及"分块"加载单个字体的能力，这样支持20个脚本的字体可以作为"块"存储在磁盘上，浏览器可以根据需要自动"分块"加载字体，而不需要预先传输整个字体，进一步改善了排版体验.

如果你不想支持IE8和更低版本，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查看