字體渲染技術(字體抗鋸齒技術) -webkit-font-smoothing: antialiased;

1、-webkit-font-smoothing控制的字體渲染只對MacOS的webkit有效。所以，你在MacOS測試環境下面設置-webkit-font-smoothing時，只要你不把它設置為none，怎么好看就設置為什么屬性，反正這個屬性僅僅是面向MacOS，不會在其他上下文中出岔子的（除了none的情形）。

2、前端控制字體渲染的接口非常匱乏，如果可能，盡可能的控制輸出的字體，而非控制字體渲染。

3、以下測試則會表明，-webkit-font-smoothing在MacOS上才有效果。

① Windows

測試環境：Win7 Pro + Chrome：

結論：Windows系統上-webkit-font-smoothing屬性不造成區別。

 

② ios

測試環境：iPad Air  +  ios7  + Safari

(ios上沒有Hiragino Sans GB,不要被標簽誤導了!)

結論：ios上，修改-webkit-font-smoothing屬性，結果是：

　　· -webkit-font-smoothing:none;  無抗鋸齒

　　· -webkit-font-smoothing:antialiased  |  subpixel-antianliased  | default;  灰度平滑

③ MacOS

測試環境：MBP  + Safari:

結論：ios上，修改-webkit-font-smoothing屬性，結果是：

　　· -webkit-font-smoothing:none;  無抗鋸齒

　　· -webkit-font-smoothing:subpixel-antialiased  |  default;  次像素平滑

　　· -webkit-font-smoothing:antialiased;  灰度平滑

4、字體抗鋸齒技術

　　字體抗鋸齒技術可以分為如下幾類：

　　· 黑白渲染：現在已經絕跡

　　·灰度渲染：常用語Android和ios等移動設備

　　·次像素平滑：常見於Mac OS 和 MacType For Windows

　　·ClearType：黑白渲染和次像素平滑的折中。WinXP內置，默認關閉；win7以上默認打開

　　理想形狀：黑白渲染；灰度渲染。

　　次像素平滑技術原理，從右往左看，注意到一個pixel里的漸變。

 

5、從不同平台瀏覽器字體渲染對比附的圖可見端倪：

 

6、以下表格是我綜合多方資料的結果，歡迎糾錯：

來源：https://segmentfault.com/q/1010000000467910/a-1020000000468107