font-weight失效移动安卓处理方法

font-weight失效移动安卓处理方法

1、BUG 现象

最近遇到一个奇怪的现象：一段文本设置了font-weight，但是在移动端中的浏览器中不显示加粗。

左侧是浏览器中移动端模拟器中的界面，可以看到对话框的标题和按钮文字是加粗的，右侧是真机开发中的对话框，标题和按钮文本是不加粗的。多次测试，中文不会加粗，英文正常。浏览器兼容性测试后也没问题，各种浏览器都是这样的。

很郁闷。

2、font-weight 失效原因

查阅了很多资料，最后发现是移动端设备字体的问题

首先，font-weight 取值范围是 100-900 ，默认的是 400

400 对应 normal

700 对应 bold(加粗)

在 PC 中，字体很多，如果设置 font-weight 是 500 600 可以正确显示。但是在移动端下，字体有限，所以设置 500 和 600 是无效的。根据图中缺失填充的方法，如果缺少 500 ，那么会向下取值400。这就是移动端上，设置 font-weight: 400 和 font-weight: 500 粗细相同的原因。

3、解决方法

我想到两种解决方法

方法一：

移动端和PC端的字体都设置成通用，即 font-weight: normal 或者 font-weight: bold;

优点：这两个值各种字体都可以取到，兼容性好，改动简单

缺点：PC 端字体粗细没有明确划分，可能和设计图纸不同

方法二：

PC 端设置字体是 font-weight:: 500 600, 然后CSS的媒体查询，设置 bold.

这样可以保证PC端字体粗细合适，移动端不会出错。

/* 移动端设置通用加粗 */
@media screen and (max-width: 991.8px) {
  .span1, .span2, .span3 {
    font-weight: bold;
  }
}

/* PC端设置不同程度的加粗 */
@media screen and (min-width: 991.8px) {
  .span1 {
    font-weight: 500;
  }
  .span2 {
    font-weight: 600;
  }
  .span3 {
    font-weight: 700;
  }
}

 

4、参考资料

https://baike.baidu.com/item/font-weight

https://developers.weixin.qq.com/community/develop/doc/000686a28a00a05646d71125251000

https://segmentfault.com/a/1190000007787731?utm_source=tag-newest

https://blog.csdn.net/weixin_33774615/article/details/89133521

https://blog.csdn.net/weixin_43974907/article/details/94446536