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