我在 Chrome 上遇到了一个奇怪的文本呈现问题，有时文本根本不会呈现，直到某些东西触发浏览器重绘。
这是问题的截图
这就是它应该看起来的样子。
当它确实失败时，只要我打开开发工具，字体就会正确呈现。
当开发工具已经打开时出现问题，更改字体大小将使文本出现。
有趣的是，当我重新设置字体大小时，文本又消失了。例如:
$('p').css('font-size', 12); // Text appears
$('p').css('font-size', 13); // And its gone again.
当我删除 Google 字体后，问题就完全消失了。这是我的字体引用，我不认为这里有什么问题吗？
<link href='https://fonts.googleapis.com/css?family=Roboto:400,700,300' rel='stylesheet' type='text/css'>
我发现了一个错误报告，看起来像我的问题 here但它已在 Chrome 34+ 中标记为已修复，我正在运行 49。
我无法在任何其他浏览器中复制它。
很想听听任何能够为我指明正确方向的人。如果您需要更多信息，请告诉我!
最佳答案
经过几个小时的头痛，我想我找到了我的问题。
就在我发布的屏幕截图下方，有一个嵌入式 Youtube 视频。事实证明，youtube 使用与我们相同的字体 (Roboto)。当我删除 Youtube iframe 或将我们的应用字体更改为另一种 Google 字体时，问题就消失了。这让我认为下载字体时存在某种冲突..？我真的不确定。
我确实通过在页面底部(而不是链接标记)通过 Javascript 包含它来让 Roboto 工作。这让设计人员很高兴 :)
关于javascript - Chrome 有时在重绘之前不会呈现 Google 字体，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37127822/