谷歌浏览器问题从@font-face 渲染字体

Question

早安，

今天我的谷歌 chrome 浏览器更新到 42 (42.0.2311.90)，我注意到我正在处理的网站有很多问题，文本会通过 div，填充被忽略。

有趣的是，如果您检查元素并取消勾选任何内容并再次勾选它，它就会开始正常工作。在任何其他浏览器或以前版本的 chrome 中都没有问题（同事仍然有 41 个）。如果您多次刷新页面，该站点将正确显示。如果我删除@font-face，则该站点可以正常运行。

看起来 chrome 似乎要么改变了它绘制/渲染外部字体的方式，要么它在绘制所有其他元素后最后加载它。

有谁知道使用@font-face 使其（新版本）对 chrome 友好的任何可能的修复或平滑方式？

@font-face {
font-family: 'MyFontFile';
src:  url("../css/fonts/MyFontFile.eot")  format("embedded-opentype"),
url("../css/fonts/MyFontFile.ttf") format("truetype"),
url("../css/fonts/MyFontFile.svg") format("svg"),
url("../css/fonts/MyFontFile.woff") format("woff");
font-style: normal;
font-weight: normal;
}

Answer 1

为了解决这个问题，我不得不强制浏览器重绘。放入下面的 jquery，这会强制浏览器重绘。

$('body').hide().show(0);