html - 外接显示器影响Chrome字体清晰度？

Question

我在 Google Chrome 中遇到字体清晰度方面的问题。我正在 www.transitioncville.org 开发一个网站，使用 @font-face 网络字体和 FontAwesome 在我的导航栏中呈现文本和图标。当我插入外接显示器(但 Chrome 窗口在我的 macbook 显示器上)并导航到我的网站时，我看到清晰、清晰的文本/图标:

如果我拔下外接显示器，我会继续获得清晰、清晰的文本/图标(即使我刷新页面或清除缓存)。但是，如果我在拔下外接显示器的情况下打开一个新的 Chrome 选项卡并导航到同一个网站，文本和图标会突然变得模糊(见下文)。我已经在其他机器上复制了这个。这可能是什么原因造成的？问题似乎不仅限于 FontAwesome，因为您也可以看到文本也变大了。

就其值(value)而言，Safari 和 Firefox 似乎都没有任何问题。

谷歌浏览器 25.0.1364.172(官方版本 187217)操作系统 Mac OS XWebKit 537.22 (@145275)JavaScript V8 3.15.11.17闪存 11.6.602.180用户代理 Mozilla/5.0 (Macintosh; Intel Mac OS X 10_7_5) AppleWebKit/537.22 (KHTML, like Gecko) Chrome/25.0.1364.172 Safari/537.22

Answer 1

我不确定具体发生了什么，但有时奇怪的浏览器特定字体渲染问题在使用以下 CSS 时会消失。尝试将其添加到页面中包含的全局 css 文件中。

html, body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    text-size-adjust: 100%;
}