Chrome 有时在重绘之前不会渲染 Google 字体答案

【问题标题】：Chrome sometimes doesn't render Google font until redrawChrome 有时在重绘之前不会渲染 Google 字体
【发布时间】：2016-09-04 19:11:40
【问题描述】：

我在 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。

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

很想听听任何可能为我指明正确方向的人。如果您需要更多信息，请告诉我！

【问题讨论】：

【解决方案1】：

在头痛了几个小时后，我想我找到了问题所在。

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

我确实通过在页面底部（而不是链接标签）包含它来让 Roboto 工作。这让设计人员很高兴:)

【讨论】：