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

9 css browser browser-cache

@font-face在过去一年左右开始使用,因为现在大多数主流浏览器都支持它.我通常只使用1-3种字体,但最常见的是我包括斜体版本,粗体和斜体粗体版本,最多可以容纳几MB的数据(取决于字体).由于我使用EOT,TTF,WOFF和SVG在大多数浏览器中工作,因此文件大小增加了.我不想要太多的带宽(和加载时间),所以我想知道:如果Firefox(或任何浏览器)成功加载文件的EOT版本,该浏览器是否仍会下载所有其他3个或者它将特别忽略休息?

我知道你们中的一些人可能会说"嗯,现在的带宽......",但我仍然希望通过习惯来保持最小化.

Jes*_*ebb 10

从我最近的测试来看,主流浏览器的最新版本(FF v26,Chrome v32和IE v11)都只下载了他们需要的字体格式文件.Firefox和Chrome似乎都更喜欢woff文件,但似乎也可以使用文件tffotf文件,虽然woff字体较小,所以你应该更喜欢它们.IE似乎需要eot字体和移动浏览器需要ttfsvg(在较旧的iOS)格式.

如果您不关心支持移动设备,则只能使用已使用eotwoff文件.否则,您可以像Tom van der Woerdt建议的那样使用eot,ttf并且应该在FF,Chrome,Safari,IE,Droid和iOS中使用.

但由于大多数浏览器只加载他们需要的文件格式,所以不要犹豫,包含多种格式.以下是您应该使用的格式(和订购)的最新建议.以下是"防止自定义字体性能下降"的一些提示,这些提示有一些有用的技巧,例如如何防止在移动设备上加载字体.

还值得一提的是,CSS3规范说应该能够有很多@font-face声明,即使它们没有被使用,浏览器也应该只下载使用的字体.Firefox和Chrome遵循此规则,但IE"不符合".


Ivo*_*Ivo 1

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

最好将不用于速度目的的那些去掉!