詳解CSS3中字型平滑處理和消除鋸齒渲染執行個體介紹

本篇文章主要介紹了CSS3中字型平滑處理和消除鋸齒渲染，具有一定的參考價值，感興趣的小夥伴們可以參考一下。

在圍觀Drupal官方主題的時候，發現了一個有意思的非標準CSS選取器-webkit-font-smoothing，於是上手把玩了一番。如何使用css3字型平滑顯示呢

要知道，W3C對CSS中字型的消除鋸齒渲染是有過考慮的，如font-smooth，不過可能由於不同作業系統以及瀏覽器核心對字型的渲染存在差異，總之，他並沒有被選入Web標準。但是WebKit還是保留了一套自有的非標準選取器來實現對消除鋸齒效果的支援，來讓字型顯示的更加平滑。

-webkit-font-smoothing主要有一下三個屬性：

1、none: 無消除鋸齒

2、subpixel-antialiased (default): 次像素平滑 常見於Mac OS和MacType For Windows

3、antialiased: 灰階平滑 常用於Android和iOS等行動裝置的

不過經過嘗試，我的木頭眼睛完全分辨不出後兩個的區別。 而且這個非標準的CSS只適用於大多數的手機瀏覽器及Safari和Chrome之類的WebKit核心的案頭瀏覽器。至於IE系列嘛，你自己不支援，怪我咯~

這裡看看實際效果吧，首先是沒有採用消除鋸齒渲染的：

接下來是採用-webkit-font-smoothing: subpixel-antialiased消除鋸齒渲染平滑處理後的效果：

可以看出來，字型邊緣的光滑程度還是不一樣的，加上後確實好看了不少。

經過測試發現，瀏覽器的內建基礎屬性中一般已經包含了字型消除鋸齒。但是為了保險起見，還是手動加上一個吧~