html - 页面滚动后在导航栏中呈现不同的字体粗细

Question

希望有人可以帮我解决这个问题。我已经尝试了无数的事情，我似乎无法弄清楚这一点。

使用谷歌浏览器，这就是我所看到的。值得注意的部分是导航栏的图标：

并滚动到底部：

如您所见，字体粗细完全不同，仅受滚动影响。这种行为似乎只发生在 OSX 上的 Chrome 上，目前运行 23.0.1271.95（最新）

我试图强制字体上的重量，甚至 !important - 它会改变重量，但是一旦我滚动它就会无缘无故地降低重量。有关可能导致此问题的原因以及如何解决此问题以确保我的网站在任何地方都能正确呈现的任何提示？

Answer 1

很可能是某些原因导致浏览器在滚动文本后禁用亚像素字体抗锯齿。这可以是任何类型的 CSS 转换、透明度等。在 OSX 上，这将使文本看起来不那么粗体（有关此内容的更多信息，请参见此处：Unwanted Bolding added to font in browsers）

解决方案是先发制人地禁用子像素字体抗锯齿。将此应用于导航栏的 CSS：

#navbar {
  -webkit-font-smoothing: antialiased;
}