CSS属性_font-smoothing

font-smoothing

今天查看style文件发现的一个属性，没怎么见过，就在网上查了查，各方总结如下。

font-smoothing ：非标准的CSS渲染规则，因为不同的浏览器和操作系统的渲染规则或者解释规则不同，这个CSS样式一直没有加入WEB标准。

通常用法：

-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;

-webkit-font-smoothing

-webkit-font-smoothing:是webkit在自己的渲染引擎中增加的对字体的抗锯齿的调整，这个调整在iOS中表现明显，在Windows中表现不明显；

主要有三个属性：

• none:关闭平滑字体显示文本用锯齿锋利的边缘,对低像素的文本比较友好；
• subpixel-antialiased:在大多数non-retina显示这将给最锋利的文本, 默认值；
• antialiased: 光滑的像素级别上的字体,而不是亚像素。从亚像素渲染转向反锯齿光文本在黑暗的背景使它看起来更轻。抗锯齿很好；

属性	效果图
none
subpixel-antialiased
antialiased

我使用的是window系统+谷歌浏览器，看不大出来效果！但是还是要写的啊!

-webkit-font-smoothing 这个属性适用于 Chrome 和 Safiri 浏览器;

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

-moz-osx-font-smoothing

主要有四个属性：

• auto:容许选择一个优化的浏览器，字体平滑，一般是grayscale；
• inherit:继承父元素；
• unset
• grayscale:与灰度反锯齿呈现文本，而不是亚像素，从亚像素渲染转向反锯齿光文本在黑暗的背景使它看起来更轻。

-moz-osx-font-smoothing这个属性是火狐针对 ios 系统制定的规则;

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

总之，该属性的作用就是让页面上的字体变得更加清晰。