字体锯齿问题

解决方案

界面中文字和字体图标，通常需要平滑显示，常规设置如下（全局字体图标设置）

.font {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
1
2
3
4

张鑫旭推荐的最佳实践（兼容系统和物理屏幕）

body {
  -webkit-font-smoothing: antialiased;
}

/* Retina下仍使用默认字体渲染 */
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 2dppx) { 
  body {
    -webkit-font-smoothing: subpixel-antialiased;
  }
}
1
2
3
4
5
6
7
8
9
10

具体说明

• antialiased：平滑像素级别的字体，而不是子像素。从亚像素渲染切换到黑暗背景上的浅色文本的抗锯齿使其看起来更轻。
• grayscale：用灰度抗锯齿渲染文本，而不是子像素。从亚像素渲染切换到黑暗背景上的浅色文本的抗锯齿使其看起来更轻。

通常在字体图标库下载时已经包含这个属性，不需要手动加。如果没有这两个属性，那么需要手动加入。

兼容性问题

这是非标准的规则，兼容性不太好，在 MAC 中的谷歌（webkit）火狐（geoko）等可以正常使用，其他浏览器效果不好。

如果不考虑其他兼容问题，可以放心使用。

注意

注1：svg 图标的平滑显示，需要单独设置（另一篇博客中简介）

注2：名称问题：MDN上显示这个属性应该名叫font-smooth（老版本的W3C的提案有关于font-smooth的内容）这是非标准的名称，没有一个浏览器用这个名字，实际上使用 font-smoothing

参考资料

• MDN：https://developer.mozilla.org/zh-CN/docs/Web/CSS/font-smooth
• 张鑫旭：https://www.zhangxinxu.com/wordpress/2017/02/font-kerning-font-smoothing-font-variant/ 原始地址：http://www.zhangxinxu.com/wordpress/?p=5974
• https://blog.csdn.net/SummerOfFoam/article/details/115563942
• https://blog.csdn.net/pupilxiaoming/article/details/78221934
• https://blog.csdn.net/weixin_42246997/article/details/104192307

这是自己遇到的一个问题，应该阅读量不高，简单记录一下。