Question

我在Chrome上遇到了一个奇怪的文字渲染问题，有时文字根本无法渲染，直到某些东西触发浏览器重绘。

这是问题的截图

这就是它的假设。

当它失败时，只要我打开开发工具，字体就会正确呈现。

当dev工具已经打开时出现问题，更改font-size将使文本显示。

有趣的是，当我将字体大小设置回来时，文字会再次消失。 EG：

$('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。

我无法在任何其他浏览器中复制此内容。

愿意听到任何能够指出我正确方向的人。如果您需要更多信息，请告诉我们！

Answer 1

经过几个小时的头痛，我想我已经找到了问题。

在我发布的截图中，有一个嵌入式Youtube视频。事实证明，youtube使用与我们相同的字体（Roboto）。当我删除Youtube iframe 或将我们的应用字体更改为其他Google字体后，问题就消失了。这让我觉得下载字体时存在某种冲突..？我真的不确定。

我最终通过在页面底部（而不是链接标记）通过Javascript包含它来让Roboto工作。这让设计人员感到高兴：）