Html 页面在滚动后在导航栏中呈现不同的字体权重

希望有人能帮我解决这个问题。我尝试过无数的事情，但我似乎无法理解这一点

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

并滚动到底部：

正如您所看到的，字体重量完全不同，只需滚动即可。这种行为似乎只发生在OSX上的Chrome上，目前运行的是23.0.1271.95（最新版本）

---

我已经试着在字体上施加重量，用！更重要的是——它会改变重量，但只要我滚动它就会无明显原因地降低重量。是否有任何提示，说明是什么原因导致了此问题，以及如何修复此问题，以确保我的网站在任何地方都能正确呈现？

最有可能的原因是，在滚动文本后，浏览器禁用了亚像素字体抗锯齿。这可以是任何类型的CSS转换、透明度等。在OSX上，这将使文本看起来不那么粗体（有关这方面的更多信息，请参见此处：）

解决方案是预先禁用亚像素字体抗锯齿。将此应用于导航栏的CSS：

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

---

顺便说一句——我实际上解决了这个问题，而不必使用webkit字体平滑。我做了一些额外的测试，并更改了右侧谷歌广告的z索引。我把它设置为500（随机，真的），导航栏设置为1000——问题完全消失了。^这不是100%正确，字体仍然比它应该的更粗体，但平滑的随机变化消失了。如果你想摆脱粗体，请使用-webkit字体平滑：抗锯齿