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

原视频地址:http://www.imooc.com/video/11742

听记

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

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

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

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

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

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

-webkit-font-smoothing: antialiased; //开启chrome在macOS上的灰阶平滑-moz-osx-font-smoothing: grayscale; //开启firefox在macOS上的灰阶平滑

注:如果是字体为深色,背景为浅色时,是不需要修改的

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • *问题:字体在屏幕上显示的时候需要将字体栅格化为一个个像素点,采用黑白像素点渲染,无法体现字体的细节之处,会造成边...
    Axiba阅读 1,367评论 0 0
  • @Ryekee:最近在看关于字体渲染技术的时候在SmashingMagazine上看到了这篇文章,觉得算是对 Wi...
    Ryekee阅读 13,868评论 3 52
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,267评论 4 61
  • 8月2日,我在《好报》写作群闭仓前两个小时,点击了确定键,成为好报写作群第九组的成员。很快半个月过来了,我想用以下...
    夏木o阅读 310评论 1 0
  • 黄昏,模糊了夕阳 冷光在无序的排列组合 一首老掉牙的情歌,引爆 遁入空门的烦恼 从今天到记忆那头 是一段头疼的距离...
    厉雄阅读 187评论 0 0