在 CSS3 font-face,有包括如多发性字体类型ttf,eot,woff,svg和cff。
font-face
ttf
eot
woff
svg
cff
我们为什么要使用所有这些类型?
如果它们专用于不同的浏览器,为什么它们的数量大于主要Web浏览器的数量?
仅使用WOFF2,或者如果需要传统支持,请使用WOFF。不要使用任何其他格式
(svg和eot是死的格式,ttf并otf有完整的系统字体,并且不应该被用于Web的目的)
otf
简而言之,font-face很老,但是直到最近,IE才支持它。
eot 早于IE9的Internet Explorer是必需的-他们发明了规范,但eot是专有解决方案。
ttf并且otf是正常的旧字体,因此有些人感到恼火,这意味着任何人都可以免费下载昂贵的许可字体。
随着时间的流逝,SVG 1.1新增了一个“字体”一章,该章解释了如何仅使用SVG标记为字体建模,人们开始使用它。花费了更多时间,事实证明,与仅使用常规字体格式相比,它们 绝对可怕 ,并且SVG 2明智地再次删除了整个章节。
然后,woff由具有相当丰富的领域知识的人发明,这使得可以以丢弃对系统安装至关重要但对网络无关的位(使人们担心盗版感到高兴)的方式托管字体,并且允许进行内部压缩以更好地满足Web的需求(使用户和主机满意)。这成为首选格式。
2019 edit 几年后,woff2被起草并被接受,这改善了压缩效果,导致文件甚至更小,并且能够“部分地”加载单个字体,从而可以将支持20个脚本的字体存储为“块”而是在磁盘上显示,浏览器可以根据需要自动加载字体“部分”,而无需预先传输整个字体,从而进一步改善了排版体验。
woff2
如果您不想支持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'); }