@font-face是否将所有字体加载到浏览器

Question

我在过去的一年左右开始使用@font-face，因为现在大多数主流浏览器都支持它。我通常最多使用1-3个字体，但大多数时候我包括斜体版本，粗体和斜体粗体版本，这很容易达到最少几MB的数据(取决于字体)。由于我使用EOT、TTF、WOFF和SVG在大多数浏览器中工作，所以文件大小会增加。我不想占用太多的带宽(和加载时间)，所以我想知道:如果Firefox (或任何浏览器)成功加载EOT版本的文件，该浏览器是否仍然会下载所有其他3个版本，或者它将明确忽略其余部分？

我知道你们中的一些人可能会说“好吧，现在的带宽……”，但我仍然倾向于让事情保持最小的习惯。

Answer 1

即使不使用该字体，大多数浏览器也会下载该字体。但它们很可能在下载后就被缓存了。

如果你去掉那些不是为了提高速度而使用的，那可能是最好的！

Answer 2

根据我最近的测试，最新版本的主要浏览器(FF v26、Chrome v32和IE v11)都只下载他们需要的字体格式文件。火狐和Chrome似乎都更喜欢woff文件，但似乎也适用于tff或otf文件，尽管woff字体更小，所以你应该更喜欢这些字体。IE似乎需要eot字体，而移动浏览器则需要ttf或svg (在较旧的iOS上)格式。

如果你不关心对移动设备的支持，你可以只使用eot和woff文件。否则，你可以像Tom van der Woerdt suggested一样，只使用eot和ttf，这应该可以在FF，Chrome，Safari，IE，Droid和iOS中工作。

但由于大多数浏览器只加载它们需要的文件格式，所以请毫不犹豫地包含许多格式。您应该使用的Here is the most up-to-date recommendation for formats (and ordering)。这里有一些关于"Preventing the Performance Hit from Custom Fonts"的提示，它们有一些有用的技巧，比如如何防止在移动设备上加载字体。

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

Answer 3

是的，浏览器可以选择下载所有字体。但是:你只需要TTF和EOT就可以支持所有主流浏览器(IE8+，火狐，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。