9

我@font-face在去年左右开始使用它，看到现在大多数主要浏览器都支持它。我通常最多只使用 1-3 种字体，但大多数时候我包括斜体版本、粗体和斜体粗体版本，这很容易达到最少几 MB 的数据（取决于字体）。由于我使用 EOT、TTF、WOFF 和 SVG 在大多数浏览器中工作，因此文件大小增加了。我不希望使用太多带宽（和加载时间），所以我想知道：如果 Firefox（或任何浏览器）成功加载文件的 EOT 版本，该浏览器是否仍会下载所有其他 3 个，或者它会特别忽略休息？

我知道你们中的一些人可能会说“嗯，现在的带宽......”，但我仍然更喜欢习惯性地保持最小化。

4

3 回答 3

10

从我最近的测试来看，主流浏览器（FF v26、Chrome v32、IE v11）的最新版本都只下载自己需要的字体格式文件。Firefox 和 Chrome 似乎都更喜欢woff文件，但似乎也可以使用tff文件otf，尽管woff字体较小，所以你应该更喜欢那些。IE 似乎需要eot字体，而移动浏览器需要ttf或svg（在较旧的 iOS 上）格式。

如果您不关心支持移动设备，则可以只使用已使用的eot和woff文件。否则，您可以按照Tom van der Woerdt 的建议eot进行操作，并且只使用ttf它应该可以在 FF、Chrome、Safari、IE、Droid 和 iOS 中使用。

但是由于大多数浏览器只加载他们需要的文件格式，所以不要犹豫，包括许多格式。这是您应该使用的格式（和排序）的最新建议。以下是“防止自定义字体对性能造成影响”的一些提示，其中包含一些有用的技巧，例如如何防止在移动设备上加载字体。

还值得一提的是，CSS3 规范说你应该能够有许多@font-face声明，即使它们没有被使用，并且浏览器应该只下载使用的字体。Firefox 和 Chrome 遵循此规则，但 IE 是“不符合标准的”。

于 2014-01-23T15:47:23.077 回答
1

大多数浏览器即使不使用字体也会下载字体。尽管它们很可能在下载后被缓存。

最好将那些不用于速度目的的东西取下来！

于 2013-05-01T00:43:58.343 回答
1

是的，浏览器可以选择下载所有字体。但是：您只需要 TTF 和 EOT 即可支持所有主流浏览器（IE8+、Firefox、Chrome、Safari、Opera）。这应该已经有很大帮助了。

语法（包括 hack，所以它可以在 IE 中工作）：

@font-face {
    font-family: "Futura Condensed";
    src: url('futura.eot?') format('embedded-opentype'), 
         url('futura.ttf') format('opentype');
}

注意后面的问号.eot，否则在IE中不起作用。

通过将其减少到两种字体，您已经节省了很多下载大小。如果您想进一步减少它，您可以使用每个浏览器样式表之类的东西，或者当用户代理匹配可能加载两者的浏览器时，您可以简单地在其中一种字体上抛出 403。

于 2013-05-01T00:49:06.900 回答