Html @字体面导致加载时间缓慢

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

我已经用firebug对此进行了调查，当页面需要很长时间才能加载时，就会显示：

这看起来完全是随机的，但对webfont.woff的请求却一直在等待。如果我尝试手动访问此资源，它可以正常工作，并在100毫秒内响应。我所说的页面是，自定义字体来自主域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头

在同一笔交易中：

---

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

在.htaccess文件（假设为Apache）中，添加：

---

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

不仅仅是字体

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

---

您可以在这里看到这个瀑布中的图像速度很慢-

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

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

编辑：

---

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

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

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

---

更多信息

将这些内容类型标题添加到my.haccess文件中，并且这些标题在请求中可见，但这似乎无法解决我的问题？即使在完全清除缓存后。啊，那太糟糕了。好吧，这将解决你没有的问题，所以这是一件好事！更新：woff的mime类型现在是

application/font-woff

。阅读：字体是最终加载还是永远不会加载？对.woff文件的请求永远不会结束，但字体会加载到屏幕上。如果它来自缓存或其他文件格式，我没有任何线索。奇怪。您是否尝试将字体文件放在不同的服务器（例如Amazon S3帐户）上，以查看是否得到相同的结果？这不是因为HTML中的图像加载是同步的，并且首先开始加载css，因为它位于HEAD标记中吗？加载字体失败后，它会加载图像，但这会导致大量的阻塞时间，因为图像正在等待字体请求完成。如果查看请求18，您会发现等待服务器开始发回图像需要2.3秒。开始渲染将等待CSS，但字体（在本例中）是在页面开始渲染后加载的，可能CSS正在缓存，而字体文件不是。我有类似的问题。当通过wifi加载我的字体时，JS脚本有时会挂起30秒（声明中的

@font-face

CSS文件会下载，但我猜，直到30秒超时，字体才会被解析），然后向服务器发出请求（本地）。如果我将相同的文件推送到远程服务器并通过数据加载页面，问题就会消失。这是我在iOS（9.2.1）Safari上遇到的一个问题。Base64编码似乎有所帮助，但即使我删除了

@font-face

文件，它仍然挂起，尽管挂起的频率要低得多。

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