html - @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 header

在 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

这将解决问题，并确保字体在所有浏览器中都能正常工作。