Ric*_*ard 5 css browser webfonts font-face
这是一个非常令人沮丧的错误!
我正在使用Font Awesome(本地托管)和其他一些字体,它们间歇性地无法加载 - 不是 404ing,只是完全无法出现在开发人员工具的“网络”选项卡中,并且没有呈现在页面上。
第一次加载页面时似乎最常发生 - 刷新字体然后加载/渲染确定。但是,清除浏览器缓存并不能可靠地重现该问题。
我知道路径没问题,因为大约 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" />
...
Run Code Online (Sandbox Code Playgroud)
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;
Run Code Online (Sandbox Code Playgroud)
}
再次,路径是正确的(字体在大约 80% 的情况下渲染正确这一事实证明了这一点)。
可能发生了什么?
可能有许多问题导致观察到的行为。根据您对问题的描述,目前尚不清楚发生了什么。
我建议尝试使用WebPagetest重现问题。勾选录制视频的选项,以便您可以看到绘画的时间。WPT 能够准确地模拟第一观看体验,因此这将是一个很好的起点。