@ font-face导致加载时间变慢

Question

最近我开始注意到网站在某些时候加载速度非常慢。

我用firebug对此进行了调查，当页面需要很长时间加载时，显示出来了：

它似乎完全随机，但对webfont.woff的请求只是等待并永远等待。如果我尝试手动达到这个资源，它工作正常，并在100毫秒内响应。我正在谈论的页面是http://wtf.maikelzweerink.nl，自定义字体来自主域maikelzweerink.nl。

face-fonts在default.css中声明，也来自主域：

@font-face {
    font-family: 'Proximanova Regular';
    src: url('//maikelzweerink.nl/general/font/Proximanova-Regular/webfont.eot');
    src: url('//maikelzweerink.nl/general/font/Proximanova-Regular/webfont.eot?#iefix') format('embedded-opentype'),
         url('//maikelzweerink.nl/general/font/Proximanova-Regular/webfont.woff') format('woff'),
         url('//maikelzweerink.nl/general/font/Proximanova-Regular/webfont.ttf') format('truetype'),
         url('//maikelzweerink.nl/general/font/Proximanova-Regular/webfont.svg#ProximaNovaRgRegular') format('svg');
}

即使使用正确的HTTP标头

也是如此

在Chrome中同样的交易(click for larger)：

Answer 1

MIME类型在字体上设置为text / plain，而不是它们应该是什么。

在你的.htaccess文件中（假设是Apache），添加：

AddType application/vnd.ms-fontobject  eot
AddType application/x-font-ttf         ttf ttc
AddType font/opentype                  otf
AddType application/x-font-woff        woff

这将解决问题，并确保字体适用于所有浏览器。

Answer 2

我使用base64 enconding将字体嵌入CSS中以减少请求量。 base64的缺点是花费更多的初始带宽但是嘿，它的工作原理！这解决了它。

当然，我对一个大小为180KB的CSS文件并不满意：/

修改 事实证明这是ISP的问题。当我mannualy加载字体时，它从缓存中检索它（该死的铬！）。不知何故，这些字体在ISP服务上没有直接可用，而且从硬盘请求/读取也需要一段时间。

Answer 3

您需要像这样预加载或预提取字体

<link rel="preload" as="font" href="/fonts/Pacifico-Regular.ttf" type="font/ttf" crossorigin="anonymous">

更多信息How to load web fonts to avoid performance issues and speed up page loading

Answer 4

这不仅仅是字体...

如果我在Chrome中反复重新加载页面，我会看到图片卡住了

你可以在这里看到瀑布中的图像速度慢 - http://www.webpagetest.org/result/120904_JN_85ef2c2901df72a0b0ec4b3181eeec77/1/details/