font-smoothing

font-smoothing

font-smoothing是非标准的css渲染规则，由于不同操作系统对字体渲染不同，不同浏览器也有自己对样式的一套解释规则，所以这个css样式至今也没有加入web标准。
这个样式的主要功能是对字体的锯齿进行调整。
-webkit-font-smoothing 是webkit在自己的渲染引擎中增加的对字体抗锯齿的调整。这个调整在ios中表现比较明显，在windows中表现的不是很明显。

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

放大5倍的效果。。。

亚像素渲染是利用红绿蓝三原色互相接近渲染模糊边缘，详细的解释内容戳链接，这是浏览器的默认渲染方式，他的抗锯齿强度低于 antialiased。
其实每个操作系统他们对于自体的渲染是由自己的风格的，ios比较喜欢尊重字体的原本设计稿，不管这个字体扭曲到产生多少锯齿，windows则比较喜欢注重实际，如果按照原设计稿出来的字体产生过多的锯齿，他会进行调整，忽视设计稿，这也是为什么font-smoothing这个属性在windows上设置时并没有太多的差别。戳

---

亚像素渲染带来的另一个问题就是相邻像素的色彩污染，导致字体图标看上去比较模糊，所以一般还是设置成antialiased进行完全抗锯齿。
Gecko内核的浏览器火狐吧，认识到字体图标逐渐发展的一个热潮，也针对ios系统制定了一个渲染规则-moz-osx-font-smoothing: inherit | grayscale
设置grayscale对于图标字体表现更清晰。