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