詳解CSS3中字體平滑處理和抗鋸齒渲染
我要評論在圍觀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)選擇器來實現(xiàn)對抗鋸齒效果的支持，來讓字體顯示的更加平滑。
-webkit-font-smoothing主要有一下三個屬性：
1、none: 無抗鋸齒
2、subpixel-antialiased (default): 次像素平滑 常見于Mac OS和MacType For Windows
3、antialiased: 灰度平滑 常用于Android和iOS等移動設(shè)備的
不過經(jīng)過嘗試，我的木頭眼睛完全分辨不出后兩個的區(qū)別。 而且這個非標(biāo)準(zhǔn)的CSS只適用于大多數(shù)的手機(jī)瀏覽器及Safari和Chrome之類的WebKit內(nèi)核的桌面瀏覽器。至于IE系列嘛，你自己不支持，怪我咯~
這里看看實際效果吧，首先是沒有采用抗鋸齒渲染的：
接下來是采用-webkit-font-smoothing: subpixel-antialiased抗鋸齒渲染平滑處理后的效果：
可以看出來，字體邊緣的光滑程度還是不一樣的，加上后確實好看了不少。
經(jīng)過測試發(fā)現(xiàn)，瀏覽器的內(nèi)置基礎(chǔ)屬性中一般已經(jīng)包含了字體抗鋸齒。但是為了保險起見，還是手動加上一個吧~
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
- 這篇文章主要介紹了CSS3字體效果的設(shè)置方法小結(jié),包括陰影效果、省略號代替以及嵌入字體,需要的朋友可以參考下2016-06-13
- rem是css3新定義的設(shè)置字體大小屬性,rem大小都是以html的字體大小設(shè)置為參考值進(jìn)行一個字體大小縮放,下面就帶大家來輕松掌握CSS3中的字體大小單位rem的使用方法:2016-05-24
- CSS3中的font-face可以將我們上傳的自定義的字體顯示出來,有時比如我們要顯示英文音標(biāo)的字體時便需要用到,本文就整理了一下使用CSS3的font-face字體嵌入樣式的方法講解,需2016-05-13
- 最近在整理學(xué)習(xí)CSS3的一些小知識，現(xiàn)在已經(jīng)整理了CSS3選擇器，CSS3圓角和CSS3元素陰影屬性的使用方法了。今天為大家整理一下CSS3中的字體陰影——text-shadow的使用方法。2016-01-08
- 今天給大家分享一款純css3實現(xiàn)的顏色漸變按鈕，這款按鈕的邊框和文字的顏色通過css3實現(xiàn)兩種顏色的漸變，清新淡雅，效果非常好看，需要的朋友可以參考下2014-11-12
- 這篇文章主要介紹了css3 自定義字體font-face使用，需要的朋友可以參考下2014-05-14
CSS3用@font-face實現(xiàn)自定義英文字體
傳說中的CSS3基本上什么都可以，那么CSS3中可不可以自定義英文字體呢?答案是非?？梢?。用@font-face即可實現(xiàn)自定義英文字體，下面有個不錯的示例，感興趣的朋友可以了解下2013-09-23CSS3+font字體文件實現(xiàn)圓形半透明菜單具體步驟(圖解)
今天就從一個簡單的圓形菜單的實現(xiàn)，使用CSS3+font字體文件實現(xiàn)圓形菜單，下面來總結(jié)一些最近學(xué)習(xí)的收獲，感興趣的朋友可以參考下哈2013-06-03- 3D字體而且還帶有陰影，這種效果想必大家只有認(rèn)為一些高級的作圖工具才可以實現(xiàn)的吧，css3的出現(xiàn)讓這一切看似不可能的實現(xiàn)成為可能，接下來為大家介紹下3D字體帶陰影效果的2013-03-20
- 網(wǎng)頁制作Webjx文章簡介：想要制作一些很酷的頭部效果而且擺脫網(wǎng)站安全字體并且不使用圖片文件？那么就使用CSS3嵌入字體吧！ 想要制作一些很酷的頭部效果而2009-04-02