Chrome字體模糊解決方案

在Chrome 瀏覽器有時候會發現網頁字體變得很模糊，有時候又不會，當你把瀏覽器窗口縮小放大的時候你就會百分百看見這個微妙的過程，當然一般頁面不會有這個情況，這個情況大多發生在頁面彈窗 或者脫離文檔流的情況。

原因大多有以下幾點：

使用了z-index

使用了 transform

高度使用了百分比，而不是px

使用了定位屬性，且top值為百分比

根本原因是以上這些屬性在Chrome里渲染后的計算屬性的值是小數，比如top:10.15px 或者 height: 40.68px , 當你放大縮小瀏覽器窗口時候，你可以觀察到彈窗高度為整數的時候沒有模糊，為小數的時候就會模糊。

解決辦法：
根據上面的原因，使用JS 獲取真實屬性值，取整后再重新賦值。
一般取上面一個屬性就可以解決，不用全部處理。

真實屬性值，是指精度高的屬性值，低版本的JQ獲取的高度等屬性是不會帶小數位的，高版本的JQ可以獲取小數位的屬性值，但我還是推薦使用原生的方法獲取屬性值更精確，詳情看這篇博客：js獲取精確寬度/高度(帶小數位像素)

總結

以上是生活随笔為你收集整理的关于Chrome字体模糊解决方案的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。