2

我试图理解为什么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;
}
4

3 回答 3

6

您拥有这些不同文件格式的原因是跨浏览器兼容性。字体文件类型有很多，但我会告诉你最常见的那些。

EOT

我相信，自 IE4 以来，Internet Explorer率先支持网络字体；然而，旧版本只接受.eot文件：所以，如果你想支持 IE<9，你必须包含它。但.eot它是一种专有文件类型，由 Internet Explorer 独家支持，也非常紧凑并具有一种数字版权保护以避免未经许可使用（文件可以具有URL 绑定，将其绑定到特定域）。

SVG

当 Safari 实现 webfonts（第 3 版）时，他们决定采用.svg，而 Opera 紧随其后。作为 Webkit Chrome 也支持.svg. 如您所知，SVG 基本上是 XML 格式的图形：这使得它们很方便，因为浏览器想要开始支持矢量图形，但这并不是最好的解决方案，因为这种格式的字体可能非常大。

TTF 和 OTF

更常见.ttf并且.otf被所有现代浏览器支持。这些格式一直存在：TrueType 用轮廓格式取代了 1980 年代的位图字体，而 OpenType 基本上建立在该标准之上，并增加了印刷功能（例如连字、变体等）。这些功能对于严肃的 Web 排版非常重要，但仍在支持过程中：

看：

WOFF

最后，.woff基本上是.ttf/.otf增加了压缩（比那些压缩好约 40%）和元数据（例如，许可证）。它是由 W3C 专门为 web 开发的，用于 web 性能（带宽限制），并且具有令人惊讶的良好支持。

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

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

于 2013-10-08T22:10:08.107 回答
2

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

例如，woff 不适用于 IE8 或各种移动浏览器eot ，而; eot仅适用于 IE。svg 不适用于 IE8 或旧版本的 Android Browser。

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

于 2013-10-08T21:45:34.940 回答
2

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

于 2013-10-08T21:45:52.293 回答