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