16

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

我用萤火虫对此进行了调查，当页面加载时间很长时，就会出现：

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

面部字体在 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 中同样的交易（点击查看大图）： 铬时间测试

4

4 回答 4

9

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

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

于 2012-09-03T17:11:58.963 回答
6

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

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

更多信息如何加载 Web 字体以避免性能问题并加快页面加载

于 2020-06-20T10:41:10.010 回答
4

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

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

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

于 2012-09-04T17:08:43.247 回答
0

不仅仅是字体...

如果我在 Chrome 中一遍又一遍地重新加载页面，我也会看到图像卡住了

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

于 2012-09-04T15:10:57.187 回答