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＆lt; 9，你必须包含它。但.eot是一种专有文件类型，并且由Internet Explorer独家支持，也非常紧凑，并且具有一种数字版权保护，以避免在没有许可证的情况下使用（文件可以有< strong> 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％）和元数据（例如，许可证）。 Web性能（带宽限制）为specifically developed for the web by W3C，并且有suprisingly good support。

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

请参阅： What fonts do browsers download when using @font-face

Answer 2

这一切都归结为浏览器支持。

例如，woff doesn't work on IE8 or various mobile browsers，而eot does; eot仅适用于IE。 svg doesn't work in IE8 or old versions of Android Browser。

如果您不需要支持IE8，那么您可以完全放弃eot文件。同样，如果您不需要支持各种移动浏览器，那么您也可以删除svg版本。

Answer 3

不同的字体格式适用于不同的操作系统和浏览器。我建议你阅读这篇文章：http://www.paulirish.com/2009/bulletproof-font-face-implementation-syntax/