在macOS的浏览器上使用灰阶渲染字体，修复字体过粗的问题

在macOS的浏览器上使用灰阶渲染字体，修复字体过粗的问题
原创 2016年12月07日 18:40:50 标签：浏览器 /字体 /macOS /灰阶渲染 /亚像素渲染 485
原视频地址：http://www.imooc.com/video/11742
听记

理想的字体其边缘的过渡是非常平滑的，但是在屏幕上显示的时候需要将字体栅格化为一个个像素点，采用黑白像素点渲染，无法体现字体的细节之处，会造成边缘呈现锯齿状的不平滑。

为了解决这个问题，字体渲染引擎采用了一些方法去进行平滑，其中就包括灰阶渲染和亚像素渲染

灰阶渲染是通过控制字体轮廓上像素点的亮度，达到字体原始形状的方法

亚像素渲染则利用了LCD屏幕中每个像素是由RGB三个亚像素的颜色和亮度混合而成一个完整像素的颜色这一原理，将字体上的轮廓点由三个亚像素体现达到原始形状的方法，与灰阶渲染相比，分辨率在垂直方向上放大了三倍，因此，渲染效果更好。但是，所消耗的内存也更多。

因此在手机屏幕上，为了减少CPU的开销，使用灰阶渲染。但是在macOS操作系统上，采用的是亚像素渲染这种方式。

这会导致白色、亮色的字体，在深色背景下会显得过粗，严重情况下看上去会模糊。
但是我们可以通过修改浏览器上的属性，告诉浏览器怎么来渲染字体。

-webkit-font-smoothing: antialiased; //开启chrome在macOS上的灰阶平滑-moz-osx-font-smoothing: grayscale; //开启firefox在macOS上的灰阶平滑
1
注：如果是字体为深色，背景为浅色时，是不需要修改的
版权声明：转载请注明地址，乐于分享，收获更多 http://blog.csdn.net/u011326979/article/details/53509451