關于-webkit-font-smoothing:antialiased

html{-webkit-font-smoothing:antialiased;}什么意思?

關于這個語句,百度了一下,看的我頭暈眼花。

到w3cschool網站查了一下,并沒有font-smoothing這個屬性,最后查到一篇文章(這是鏈接),提到這個屬性“是非標準的CSS定義。它被列入標準規范的草案中,后由于某些原因從web標準中被移除了。但是,我們可以用以下兩種定義進行抗鋸齒渲染

-webkit-font-smoothing: antialiased; /*chrome、safari*/

-moz-osx-font-smoothing: grayscale;/*firefox*/”

對于前面的”-webkit”、”-moz”,css3(這是鏈接)中寫道“在編寫CSS3樣式時,不同的瀏覽器可能需要不同的前綴。它表示該CSS屬性或規則尚未成為W3C標準的一部分,是瀏覽器的私有屬性,雖然目前較新版本的瀏覽器都是不需要前綴的,但為了更好的向前兼容前綴還是少不了的。”這里就很清楚了,”-webkit”是針對chrome和Safari瀏覽器,”-moz”是針對Firefox瀏覽器的前綴。

那么回過頭來再說-webkit-font-smoothing,(以下是引用鏈接

(1)Webkit在自己的引擎中支持了這一效果。

-webkit-font-smoothing

它有三個屬性值:

none —— 對低像素的文本比較好

subpixel-antialiased——默認值

antialiased ——抗鋸齒很好

例子:body{-webkit-font-smoothing: antialiased;}

這個屬性可以使頁面上的字體抗鋸齒,使用后字體看起來會更清晰。

加上之后就頓時感覺頁面小清晰了。

(2)Gecko也推出了自己的抗鋸齒效果的非標定義。

-moz-osx-font-smoothing: inherit | grayscale;

這個屬性也是更清晰的作用。

例子:.icon {-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}

(3)Ionic框架在樣式中多加了一條font-smoothing: antialiased;

這是坐等font-smoothing標準化,有備無患么。

綜上,這個font-smoothing現在已經不是標準的CSS3屬性,已經被移除了。前綴-webkit是chrome和safari的私有屬性,-moz一樣也是Firefox的私有屬性。

那么問題來了,這個屬性到底該用還是不該用?如果我添加了,那么除了chrome和safari以及Firefox瀏覽器,這個屬性是不是就是無用的呢?還是以后CSS以后的版本會在加進去呢?

參考網址:http://www.th7.cn/web/html-css/201512/149250.shtml

http://maxvoltar.com/archive/-webkit-font-smoothing

https://developer.mozilla.org/en-US/docs/Web/CSS/font-smooth

https://segmentfault.com/q/1010000000467910

http://www.iyunlu.com/view/css-xhtml/67.html

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容