Question

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

我正在使用Font Awesome（本地托管）和其他几种字体，它们间歇性地无法加载 - 不是404，只是完全无法显示在开发人员工具的“网络”选项卡中，而且没有被渲染在页面上。

这似乎最常发生在第一次加载页面时 - 刷新字体然后加载/渲染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％的时间内都能正确渲染）。

可能会发生什么？

Answer 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。仍然间歇性地失败。

Answer 2

可能存在许多导致观察到的行为的问题。根据您对问题的描述，发生的事情并不明显。

我建议尝试使用WebPagetest重现问题。选中录制视频的选项，以便查看油漆的时间。 WPT能够准确地模拟第一次观看体验，因此这将是一个很好的起点。

字体间歇性地无法加载？

2 个答案: