font-smoothing

body {
  -webkit-touch-callout: none;
  -webkit-overflow-scrolling: touch;

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

font-smoothing

font-smoothing是非标准的css渲染规则，由于不同操作系统对字体渲染不同，不同浏览器也有自己对样式的一套解释规则，所以这个css样式至今也没有加入web标准。
这个样式的主要功能是对字体的锯齿进行调整。
-webkit-font-smoothing 是webkit在自己的渲染引擎中增加的对字体抗锯齿的调整。这个属性仅在 Mac OS X/macOS 下生效。

•       none - 关闭字体平滑；展示有锯齿边缘的文字。
•       antialiased - 平滑像素级别的字体，而不是子像素。从亚像素渲染切换到黑暗背景上的浅色文本的抗锯齿使其看起来更轻。
•       subpixel-antialiased - 在大多数非视网膜显示器上，这将会提供最清晰的文字。

Firefox的 -moz-osx-font-smoothing这个属性仅在 Mac OS X / macOS 下生效。

•       auto - 允许浏览器选择字体平滑的优化方式，通常为grayscale。
•       grayscale - 用灰度抗锯齿渲染文本，而不是子像素。从亚像素渲染切换到黑暗背景上的浅色文本的抗锯齿使其看起来更轻。
•       inherit
•       unset

-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对于图标字体表现更清晰。