我在过去一年左右开始使用@font-face，因为大多数主流浏览器现在都支持它。我通常只使用1-3种字体，但最常见的是我包括斜体版本，粗体和斜体粗体版本，最多可以容纳几MB的数据（取决于字体）。由于我使用EOT，TTF，WOFF和SVG在大多数浏览器中工作，因此文件大小增加了。我不想要太多的带宽（和加载时间），所以我想知道：如果Firefox（或任何浏览器）成功加载文件的EOT版本，该浏览器是否仍会下载所有其他3个或者它将特别忽略休息？
我知道你们中的一些人可能会说“嗯，现在的带宽......”，但我仍然希望通过习惯来保持最小化。
答案 0 :(得分：10)
根据我最近的测试，主流浏览器的最新版本（FF v26，Chrome v32和IE v11）都只下载了他们需要的字体格式文件。 Firefox和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“不符合”。
答案 1 :(得分：1)
即使未使用，大多数浏览器也会下载该字体。虽然它们很可能在下载后被缓存了。
最好不要使用那些不用于速度目的的那些！
答案 2 :(得分：1)
是的，浏览器可能选择下载所有字体。但是：您只需要TTF和EOT来支持所有主流浏览器（IE8 +，Firefox，Chrome，Safari，Opera）。这应该已经有很多帮助了。
语法（包括黑客，因此它在IE中工作）：
@font-face {
font-family: "Futura Condensed";
src: url('futura.eot?') format('embedded-opentype'),
url('futura.ttf') format('opentype');
}
请注意.eot之后的问号，否则它将无法在IE中使用。
通过将其减少为两种字体，您已经在下载大小上节省了很多。如果你想进一步减少它，你可以使用像浏览器样式表这样的东西，或者当用户代理匹配可能同时加载这两种字体的浏览器时，你可以简单地在其中一种字体上抛出403。