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