頁面在滾動後在導航欄中呈現不同的字體重量

Question

希望有人能幫我弄清楚這一點。我已經嘗試了無數的事情，我似乎無法弄清楚這一點。

使用谷歌瀏覽器，這就是我所看到的。不可忽視的部分是導航欄的圖標：

，並滾動至底部：

正如你所看到的，字體粗細僅僅是由滾動完全不同的影響。這種行爲似乎只發生在OSX上的Chrome上，目前正在運行23.0.1271.95（最新版本）

我試圖強制重量放在字體上，甚至重要 - 它會改變重量，但只要我滾動它會降低重量沒有明顯的原因。任何關於什麼可能導致這個問題的提示，以及我如何解決這個問題，以確保我的網站在任何地方都能正確渲染？

Answer 1

最有可能的原因是瀏覽器在滾動文本後禁用了亞像素字體抗鋸齒功能。這可以是任何類型的CSS轉換，透明度等。在OSX上，這將使文本看起來更不粗糙（請參閱此處瞭解更多：Unwanted Bolding added to font in browsers）

解決方案是先發制人地禁用子像素字體反鋸齒。將其應用到您的導航欄的CSS：

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