javascript - 由于 javascript，@font-face 无法加载某些请求？

Question

有一个奇怪的问题，

我正在测试网络字体

这是我的CSS

@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    src: local('Open Sans'), local('OpenSans'), url(/assets/opensans.woff) format('woff');
}

我在整个应用程序中都使用该字体，并且在一页上没有任何问题。 我在这个页面上有相当多的 JS，JS 正在定位元素并设置右侧 div 的高度。

在某些请求中，webfont 没有加载(根本)

例如

我可以在 Windows 7 的 chrome 上重现这个。但只是有时。

那些框应该充满文本，您可以看到的文本是我没有使用@font-face 的地方。

我有绑定(bind)到窗口大小调整的 javascript 事件，这些事件会更改右侧 div 的宽度高度。有趣的是，当我调整窗口大小时，字体似乎加载了。

我在 Chrome 的控制台或网络选项卡中看不到任何错误。

有点迷失了它可能是什么。

Answer 1

这是一个已知的 bug与 Chrome 。它已经修复，所以等待更新？

或者您可以通过应该显示字体的 CSS(取自错误报告)强制重新绘制:

body
{
    -webkit-animation-duration: 0.1s;
    -webkit-animation-name: fontfix;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: linear;
    -webkit-animation-delay: 0.1s;
}

@-webkit-keyframes fontfix{
    from{   opacity: 1; }
    to{ opacity: 1; }
}

或 JS:

var body = document.getElementByTag("body")[0];
var disp = body.style.display;
body.style.display = 'none';
body.style.display = disp;

jQuery:

$(function() { $('body').hide().show(); });