webfonts的不同字体格式

Question

我试图理解为什么Font Awesome带有各种字体格式,并且想知道如果我只需要保留一两个就不会有害.

我想找出缩小规模所不需要的东西.我还没有遇到解释这个问题的文档.

@font-face {
  font-family: 'FontAwesome';
  src: url('../font/fontawesome-webfont.eot?v=3.2.1');
  src: url('../font/fontawesome-webfont.eot?#iefix&v=3.2.1') format('embedded-opentype'), url('../font/fontawesome-webfont.woff?v=3.2.1') format('woff'), url('../font/fontawesome-webfont.ttf?v=3.2.1') format('truetype'), url('../font/fontawesome-webfont.svg#fontawesomeregular?v=3.2.1') format('svg');
  font-weight: normal;
  font-style: normal;
}

Answer 1

您拥有这些不同文件格式的原因是crossbrowser兼容性.有很多字体文件类型,但我会告诉你最常见的.

EOT

自从IE4以来,Internet Explorer 率先支持webfonts,我相信; 但是,旧版本只接受.eot文件:因此,如果要支持IE <9,则必须包含该文件.但它.eot是一种专有文件类型,并且由Internet Explorer独家支持,也非常紧凑,并且具有一种数字版权保护,以避免在没有许可证的情况下使用(该文件可以具有URL绑定,将其绑定到特定域).

SVG

当Safari实现webfonts(版本3)时,他们决定选择.svg,然后是Opera.Webkit Chrome也支持.svg.如你所知,SVG基本上是XML格式的图形:这使得它们很方便,因为浏览器想要开始支持矢量图形,但它不是最好的解决方案,因为这种格式的字体可能非常大.

TTF和OTF

所有现代浏览器都更常见.ttf并.otf得到支持.这些格式永远存在:TrueType在20世纪80年代用大纲格式替换了位图字体,而OpenType基本上是基于该标准构建的,具有添加的排版功能(例如连字,变体等).这些功能对于严肃的网络排版非常重要,但仍处于支持过程中:

看到:

• http://caniuse.com/font-feature
• http://helpme.webink.com/customer/portal/articles/310119-what-browsers-support-opentype-features
• https://www.typotheque.com/articles/opentype_features_in_web_browsers(2012)

WOFF

最后,.woff基本上是.ttf/ .otf增加压缩(压缩比那些压缩约40%)和元数据(例如,许可证).它是由W3C针对网络性能(带宽限制)专门为Web开发的,并且具有令人惊讶的良好支持.

总而言之,我不认为不将它们放在CSS中会节省几个字节,浏览器可能在遇到@font-face属性时下载的字体上很聪明.

请参阅: 使用@ font-face时,浏览器会下载哪些字体