在圍觀Drupal官方主題的時(shí)候，發(fā)現(xiàn)了一個(gè)有意思的非標(biāo)準(zhǔn)CSS選擇器-webkit-font-smoothing，于是上手把玩了一番。如何使用css3字體平滑顯示呢
要知道，W3C對(duì)CSS中字體的抗鋸齒渲染是有過(guò)考慮的，如font-smooth，不過(guò)可能由于不同操作系統(tǒng)以及瀏覽器內(nèi)核對(duì)字體的渲染存在差異，總之，他并沒(méi)有被選入Web標(biāo)準(zhǔn)。但是WebKit還是保留了一套自有的非標(biāo)準(zhǔn)選擇器來(lái)實(shí)現(xiàn)對(duì)抗鋸齒效果的支持，來(lái)讓字體顯示的更加平滑。
-webkit-font-smoothing主要有一下三個(gè)屬性：
- none: 無(wú)抗鋸齒
- subpixel-antialiased (default): 次像素平滑 常見(jiàn)于Mac OS和MacType For Windows
- antialiased: 灰度平滑 常用于Android和iOS等移動(dòng)設(shè)備的
不過(guò)經(jīng)過(guò)嘗試，我的木頭眼睛完全分辨不出后兩個(gè)的區(qū)別。
而且這個(gè)非標(biāo)準(zhǔn)的CSS只適用于大多數(shù)的手機(jī)瀏覽器及Safari和Chrome之類的WebKit內(nèi)核的桌面瀏覽器。至于IE系列嘛，你自己不支持，怪我咯~
這里看看實(shí)際效果吧，首先是沒(méi)有采用抗鋸齒渲染的：
接下來(lái)是采用-webkit-font-smoothing: subpixel-antialiased抗鋸齒渲染平滑處理后的效果：
可以看出來(lái)，字體邊緣的光滑程度還是不一樣的，加上后確實(shí)好看了不少。
經(jīng)過(guò)測(cè)試發(fā)現(xiàn)，瀏覽器的內(nèi)置基礎(chǔ)屬性中一般已經(jīng)包含了字體抗鋸齒。但是為了保險(xiǎn)起見(jiàn)，還是手動(dòng)加上一個(gè)吧~
我的個(gè)人博客，里面會(huì)有各種有意思的東西哦，歡迎關(guān)注。iamkun.com
