我在Chrome上遇到了一个奇怪的文本渲染问题,有时文本根本不会渲染,直到某些东西触发浏览器重新绘制为止。

这是问题的屏幕截图

javascript - Chrome有时直到重新绘制后才会呈现Google字体-LMLPHP

这就是它的外观。

javascript - Chrome有时直到重新绘制后才会呈现Google字体-LMLPHP

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

当已经打开的开发工具出现问题时,更改字体大小将使文本出现。

有趣的是,当我重新设置字体大小时,文本再次消失。例如:

$('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(而不是link标签)将Roboto包括进来,从而使Roboto正常工作。这让设计人员感到高兴:)

10-05 20:54
查看更多