Google Chrome 从@font-face 发出渲染字体

Question

早上好，

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

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

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

有谁知道使用@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);

Google Chrome 从@font-face 发出渲染字体

Google Chrome Issue Rendering Font From @font-face

html

css

fonts

google-chrome

font-face