font-smoothing
font-smoothing是非標(biāo)準(zhǔn)的css渲染規(guī)則攒暇,由于不同操作系統(tǒng)對字體渲染不同铺纽,不同瀏覽器也有自己對樣式的一套解釋規(guī)則趟咆,所以這個css樣式至今也沒有加入web標(biāo)準(zhǔn)呵扛。
這個樣式的主要功能是對字體的鋸齒進(jìn)行調(diào)整电湘。
-webkit-font-smoothing 是webkit在自己的渲染引擎中增加的對字體抗鋸齒的調(diào)整隔节。這個調(diào)整在ios中表現(xiàn)比較明顯,在windows中表現(xiàn)的不是很明顯胡桨。
放大5倍的效果官帘。。昧谊。
亞像素渲染是利用紅綠藍(lán)三原色互相接近渲染模糊邊緣刽虹,詳細(xì)的解釋內(nèi)容戳鏈接,這是瀏覽器的默認(rèn)渲染方式呢诬,他的抗鋸齒強(qiáng)度低于 antialiased涌哲。
其實每個操作系統(tǒng)他們對于自體的渲染是由自己的風(fēng)格的,ios比較喜歡尊重字體的原本設(shè)計稿尚镰,不管這個字體扭曲到產(chǎn)生多少鋸齒阀圾,windows則比較喜歡注重實際,如果按照原設(shè)計稿出來的字體產(chǎn)生過多的鋸齒狗唉,他會進(jìn)行調(diào)整初烘,忽視設(shè)計稿,這也是為什么font-smoothing這個屬性在windows上設(shè)置時并沒有太多的差別分俯。戳
亞像素渲染帶來的另一個問題就是相鄰像素的色彩污染肾筐,導(dǎo)致字體圖標(biāo)看上去比較模糊,所以一般還是設(shè)置成antialiased進(jìn)行完全抗鋸齒缸剪。
Gecko內(nèi)核的瀏覽器火狐吧吗铐,認(rèn)識到字體圖標(biāo)逐漸發(fā)展的一個熱潮,也針對ios系統(tǒng)制定了一個渲染規(guī)則-moz-osx-font-smoothing: inherit | grayscale
設(shè)置grayscale對于圖標(biāo)字體表現(xiàn)更清晰杏节。