@ 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中同样的交易(点击查看大图):

Answer 1

你需要像这样预加载或预取你的字体

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

详细信息如何加载 Web 字体以避免性能问题并加快页面加载速度

Answer 2

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 3

我使用 base64 编码将字体嵌入 CSS 中以减少请求量。Base64 的缺点是初始带宽成本更高，但是嘿，它确实有效！这解决了它。

当然，我对 180KB 大小的 CSS 文件不太满意：/

编辑： 结果是 ISP 出了问题。当我手动加载字体时，它从缓存中检索它（该死的chrome！）。不知何故，这些字体无法直接在 ISP 服务上使用，并且从硬盘请求/读取需要一段时间。