1. 背景

在做 H5 的开发中， 有一个需求需要设置字体权重为 600，即：font-weight: 600；。

在开发中我们按照 UI 给出的字体权重设置了600，最终的效果发现在个别手机上出现了字体加粗不生效的情况。

2. 原理

2.1 字体文件差异：

一些字体只提供 normal（400）和 bold（700）两种值。如果指定的权重值不可用，则使用以下规则来确定实际呈现的权重：

1. 如果指定的权重值在 400 和 500 之间（包括 400 和 500）： 400<= X <=500: X-500; 400-X

• 按升序查找指定值与 500 之间的可用权重；
• 如果未找到匹配项，按降序查找小于指定值的可用权重；
• 如果未找到匹配项，按升序查找大于 500 的可用权重。

2. 如果指定值小于 400，按降序查找小于指定值的可用权重。如果未找到匹配项，按升序查找大于指定值的可用权重（先尽可能的小，再尽可能的大）。 X < 400 : 0-400； 400-~
3. 如果指定值大于 500，按升序查找大于指定值的可用权重。如果未找到匹配项，按降序查找小于指定值的可用权重（先尽可能的大，再尽可能的小）。 X > 500: 500-~; 0~500

以上策略意味着，如果一个字体只有 normal 和 bold 两种粗细值选择，指定粗细值为 100-500 时，实际渲染时将使用 normal，指定粗细值为 501-900 时，实际渲染时将使用 bold。

2.2 操作系统差异

不同操作系统对字体的渲染也有所不同，特别是在字体平滑和抗锯齿技术的应用上，这可能影响到字体的粗细表现。

解决方案： 在超大屏上使用效果明显；

-webkit-font-smoothing: antialiased; // 在像素（而不是亚像素）级别平滑字体。对于深色背景上的浅色文本，从亚像素渲染切换为抗锯齿渲染可以使其看起来更清晰
-moz-osx-font-smoothing: grayscale; // 用灰度抗锯齿（而不是亚像素）渲染文本。对于深色背景上的浅色文本，从亚像素渲染切换为抗锯齿渲染可以使其看起来更清晰。

表现如下：

3. 最佳实践

1. 使用常规的加粗： font-weight: bold。
2. 深色背景上时：抗锯齿渲染; 白色或亮色背景：亚像素渲染。

版权所有

版权归属：tuyongtao1

许可证：署名 4.0 国际 (CC-BY-4.0)