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

Question

希望有人可以帮助我解决这个问题。我尝试了无数的东西，我似乎无法想出这个。

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

并滚动到底部：

正如您所看到的，字体粗细完全不同，只是通过滚动来影响。这种行为似乎只发生在OSX上的Chrome上，目前正在运行23.0.1271.95（最新版）

我试图强迫字体上的重量，甚至是重要的 - 它会改变重量，但是一旦我滚动它就会降低重量，没有明显的原因。关于可能导致此问题的任何提示，以及我如何解决这个问题，以确保我的网站在任何地方正确呈现？

Answer 1

滚动文本后，最有可能导致浏览器禁用亚像素字体抗锯齿。这可能是任何类型的CSS转换，透明度等。在OSX上，这将使文本看起来不那么大胆（有关详细信息，请参阅此处：Unwanted Bolding added to font in browsers）

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

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