Chrome 中的字体渲染问题

Question

我发现我正在开发的网站存在问题，其中页面的内容区域显示带有字体渲染的随机伪影。这些页面使用的是 Google 字体“Source Sans Pro”，并且在下面的屏幕截图中除了 p 标记之外没有其他标记。看起来它在页面的某些部分使用了备用无衬线字体，而在其他部分使用了适当的字体。

我还注意到，如果我在控制台中打开和关闭 font-family CSS 属性，它会修复外观......此外，如果我刷新页面（而不是使用现场导航），它似乎也正确渲染。我无法在另一台装有最新版 Chrome 的机器上复制它，但它在我的开发和测试环境中是一致的。我使用的唯一扩展是 Disconnect、AdBlock、PageSpeed Insights、RSS 阅读器和 Javascript Quickswithcer……所有其他浏览器的行为似乎都符合预期。

使用的 CSS：

body,*{font-family: 'Source Sans Pro',sans-serif}

您知道为什么最新版本的 Windows 版 Chrome 会以这种方式呈现吗？

Answer 1

我相信我遇到了类似的问题。我可以通过覆盖我使用的 CSS 框架在 body 标签上设置的 CSS text-rendering: optimizeLegibility 来修复它，如下所示：

body { text-rendering: auto; }

注意：为了追踪错误，我在 OSX El Capitan 上的 Chrome 版本是 48.0.2564.116（64 位）。一位同事告诉我这个问题，我必须切换到隐身模式才能开始看到这个问题。