我发现我正在开发的网站存在问题，其中页面的内容区域显示带有字体渲染的随机伪像。这些页面使用的是谷歌字体“Source Sans Pro”，除了下面截图中的 p-tags 之外，没有其他标签。看起来它在页面的某些部分使用了后备无衬线字体，而在其他部分使用了适当的字体。
我还注意到，如果我在控制台中打开和关闭 font-family CSS 属性，它会修复外观...此外，如果我刷新页面(而不是使用现场导航)，它似乎也正确渲染。我无法在另一台装有最新版本 Chrome 的机器上复制它，但它在我的开发和测试环境中是一致的。我使用的唯一扩展程序是 Disconnect、AdBlock、PageSpeed Insights、RSS 阅读器和 Javascript Quickswithcer...所有其他浏览器似乎都按预期运行。
使用的 CSS:
body,*{font-family: 'Source Sans Pro',sans-serif}
对于为什么最新版本的 Windows 版 Chrome 会以这种方式显示，您有什么想法吗？
最佳答案
我相信我遇到过类似的问题。我能够通过覆盖我使用的 CSS 框架在 body 标签上设置的 CSS text-rendering: optimizeLegibility 来修复它，如下所示:
body { text-rendering: auto; }
注意:为了尝试追踪错误，我在 OSX El Capitan 上的 Chrome 版本是 48.0.2564.116(64 位)。一位同事告诉我这个问题，在我开始看到这个问题之前我不得不切换到隐身模式。
关于css - Chrome 中的字体渲染问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35460976/