CSS3 属性 font-smoothing 字体平滑处理和抗锯齿渲染

在浏览网页的时候，偶然看到某个网页的字体特别清晰细致，所以就很想知道它使用了什么字体或样式。后来才发现原来是 -webkit-font-smoothing 这个 CSS 属性渲染的结果，这个属性可以对字体进行抗锯齿渲染，使得字体看起来会更加清晰舒服。

它是一个非标准化的 css 属性，曾被列入了标准规范的草案中，但由于不同操作系统对字体渲染不同，不同浏览器也有自己对样式的一套解释规则，所以这个 css 样式至今也没有加入 web 标准。

我们可以使用以下两种定义进行抗锯齿渲染：

-webkit-font-smoothing: antialiased; /*chrome、safari*/
-moz-osx-font-smoothing: grayscale;/*firefox*/

前缀 -webkit 是 chrome 和 safari 的私有属性，-moz 是 Firefox 的私有属性。

1、Webkit在自己的引擎中支持了这一效果

-webkit-font-smoothing:none | subpixel-antialiased | antialiased

-webkit-font-smoothing 这个属性适用于 Chrome 和 Safiri 浏览器，它有三个属性值：

2、Gecko也推出了自己的抗锯齿效果的非标准定义

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

-moz-osx-font-smoothing，是火狐针对 ios 系统制定的规则，有两个属性值：

结束语：
font-smoothing 这个属性可以使页面上的字体抗锯齿，使用后字体看起来会更清晰，适合于 Webkit 和 Gecko 内核的浏览器，在 Mac OS 和 ios 中表现比较明显，在 windows 中表现不明显，大家可以根据场景有选择性地使用。