font-smoothing
font-smoothing是非标准的css渲染规则,由于不同操作系统对字体渲染不同,不同浏览器也有自己对样式的一套解释规则,所以这个css样式至今也没有加入web标准。
这个样式的主要功能是对字体的锯齿进行调整。
-webkit-font-smoothing 是webkit在自己的渲染引擎中增加的对字体抗锯齿的调整。这个调整在ios中表现比较明显,在windows中表现的不是很明显。
放大5倍的效果。。。
亚像素渲染是利用红绿蓝三原色互相接近渲染模糊边缘,详细的解释内容戳链接,这是浏览器的默认渲染方式,他的抗锯齿强度低于 antialiased。
其实每个操作系统他们对于自体的渲染是由自己的风格的,ios比较喜欢尊重字体的原本设计稿,不管这个字体扭曲到产生多少锯齿,windows则比较喜欢注重实际,如果按照原设计稿出来的字体产生过多的锯齿,他会进行调整,忽视设计稿,这也是为什么font-smoothing这个属性在windows上设置时并没有太多的差别。戳
亚像素渲染带来的另一个问题就是相邻像素的色彩污染,导致字体图标看上去比较模糊,所以一般还是设置成antialiased进行完全抗锯齿。
Gecko内核的浏览器火狐吧,认识到字体图标逐渐发展的一个热潮,也针对ios系统制定了一个渲染规则-moz-osx-font-smoothing: inherit | grayscale
设置grayscale对于图标字体表现更清晰。