Chrome中的字体渲染问题

Question

我发现我正在开发的网站存在问题，其中网页的内容区域显示带有字体呈现的随机工件。页面使用谷歌字体'Source Sans Pro'，下面的屏幕截图中没有其他标签的其他标签。看起来它在页面的某些部分使用了fallback sans-serif，在其他部分使用了相应的字体。

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

使用的CSS：

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

有关为什么最新版本的Chrome for Windows可能以这种方式呈现的任何想法？

Answer 1

我相信我遇到过类似的问题。我能够通过我正在使用的CSS框架覆盖body标签上的CSS text-rendering: optimizeLegibility来修复它：

body { text-rendering: auto; }

注意：为了尝试跟踪错误，我的Chrome版本是OSX El Capitan上的48.0.2564.116（64位）。一位同事告诉我这个问题，在开始看到这个问题之前我不得不切换到隐身模式。