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;
}