字体间歇性无法加载？答案

【问题标题】：Fonts intermittently failing to load?字体间歇性无法加载？
【发布时间】：2013-03-27 16:28:27
【问题描述】：

这是一个非常令人沮丧的错误！

我正在使用Font Awesome（本地托管）和其他几种字体，它们间歇性地无法加载 - 不是 404ing，只是完全没有出现在开发者工具的“网络”选项卡中，并且没有在页。

这似乎最常发生在第一次加载页面时 - 刷新字体然后加载/渲染 OK。但是，清除浏览器缓存并不能可靠地重现该问题。

我知道路径没问题，因为大约 80% 的时间字体呈现正常。这是一个间歇性问题。我在 OSX 上使用 Chrome v26。

我的 CSS 如下所示：

<head>
... 
<link rel="stylesheet" type="text/css" href="${context}/resources/font/opensans.css" />
<link rel="stylesheet" type="text/css" href="${context}/resources/css/font-awesome.min.css" />
...

CSS 文件如下所示：

@font-face {
font-family: 'open_sanslight';
src: url('opensans-light-webfont.eot');
src: url('opensans-light-webfont.eot?#iefix') format('embedded-opentype'),
     url('opensans-light-webfont.woff') format('woff'),
     url('opensans-light-webfont.ttf') format('truetype'),
     url('opensans-light-webfont.svg#open_sanslight') format('svg');
font-weight: normal;
font-style: normal;

}

再一次，路径是正确的（这可以从大约 80% 的时间字体正确呈现的事实证明）。

可能发生了什么？

【问题讨论】：

你在查看网络标签@firefox吗？一样吗？
我没有注意到 Firefox 中的问题，我现在无法重现它（实际上我在 Firefox 中禁用了缓存，所以如果有的话应该会更糟）。就像我说的：莫名其妙。
试一试：stackoverflow.com/questions/4015816/…

标签： css browser font-face webfonts

【解决方案1】：

这里也是同样的问题。似乎只影响 Chrome。 Chromium 中的这个错误似乎描述了相同的问题（或非常相似的问题）：

https://code.google.com/p/chromium/issues/detail?can=2&start=0&num=100&q=font&colspec=ID%20Pri%20M%20Iteration%20ReleaseBlock%20Cr%20Status%20Owner%20Summary%20OS%20Modified&groupby=&sort=-modified&id=229071

我们目前假设这是一个浏览器错误，但它似乎只影响我们的一些网站，而不影响其他网站，因此可能不止于此。

以下是我们尝试过的一些事情，但没有成功：

从引导 CDN 而不是我们自己的服务器加载字体 (FontAwesome)。仍然间歇性地失败。
将字体文件内嵌为 base64 编码字符串。仍然间歇性地失败。
从 FontAwesome 切换到 SymbolSet。仍然间歇性地失败。

【讨论】：

【解决方案2】：

可能有许多问题会导致观察到的行为。根据您对问题的描述，目前尚不清楚发生了什么。

我建议尝试使用WebPagetest 重现该问题。勾选录制视频的选项，这样您就可以看到绘画的时间。 WPT 能够准确地模拟首次观看体验，因此这是一个很好的起点。

【讨论】：