小编典典

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

css

CSS3 font-face,有包括如多发性字体类型ttfeotwoffsvgcff

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

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


阅读 425

收藏
2020-05-16

共1个答案

小编典典

在2019年回答:

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

svgeot是死的格式,ttfotf有完整的系统字体,并且不应该被用于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');
}
2020-05-16