记录一次关于css font-weight引发的风波

Jou

发布于 2022-10-28 17:18:30

1.9K00

代码可运行

文章被收录于专栏：前端技术归纳

运行总次数：0

代码可运行

前言

在最近的一次开发中，设计同事说我设置的页面标题字体很粗，想让我调细一些，起初，我以为只是一个很简单的问题，但是调整的时候，发现事情并没有这么简单，于是，写下这篇文章记录踩过的坑。

问题案例

页面

<div className='box'>
  <p className='p1'>The sky reflects the earth, and the sky makes the sound of rain</p>
  <p className='p2'>The sky reflects the earth, and the sky makes the sound of rain</p>
  <p className='p3'>The sky reflects the earth, and the sky makes the sound of rain</p>
</div>

<div className='box'>
  <p className='p1'>映地为天色，飞空作雨声</p>
  <p className='p2'>映地为天色，飞空作雨声</p>
  <p className='p3'>映地为天色，飞空作雨声</p>
</div>

样式

p {
  text-align: left;
  font-family: Robot, Arial, Helvetica, PingFangSC, Microsoft Yahei, sans serif;
  &amp;.p1 {
    font-weight: 100;
  }
  &amp;.p2 {
    font-weight: 400;
  }
  &amp;.p3 {
    font-weight: 700;
  }
}

这里，我分别指定了一组中英文的渐进字重文段，然后我们来看看效果

可以明显的看到，英文只展示出了两种字重的样式，而中文展示出了三种字重的情况，这里是因为什么呢，我们来一步一步的说。

font-weight

font-weight属性决定着文字的粗细程度，值可以为数字或者关键字，常用的大概有以下类型

300
400 (normal)
500
600
700 (bold)

注意：bolder和lighter没有对应的数字，为什么呢？因为它们俩是相对父元素而言的。例如：如果父元素设置的是font-weight:200; 子元素我设置为font-weight:bolder; 那么你在浏览器上查看的时候你会发现最后显示就变成了normal的效果。因为bolder是相对父级元素而言的。同理lighter也是如此。

字体对font-weight的影响

我们都知道，在 css 中，可以通过 font-family 指定不同的字体，并且可以给定一个先后顺序，由字体名或者字体族名组成。

当指定的的字体找不到的时候，浏览器会按照 font-family 属性指定的先后顺序寻找支持的字体。

字体的字重回退机制

在 CSS 中，可以通过 font-weight 属性指定了字体的粗细程度，但是不同字体支持的字重不同，比如说有些字体可能只支持400,700两个权重，如果指定的权重值不可用，浏览器需要靠字重的回退机制去解决。

如果指定的权重值在 400和 500之间（包括400和500）：

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

如果指定值小于400

按降序查找小于指定值的可用权重。如果未找到匹配项，按升序查找大于指定值的可用权重（先尽可能的小，再尽可能的大）。

如果指定值大于500

按升序查找大于指定值的可用权重。如果未找到匹配项，按降序查找小于指定值的可用权重（先尽可能的大，再尽可能的小）。

回到问题

了解了这两个模块的知识之后，我们再来看看这个问题

p {
  text-align: left;
  font-family: Robot, Arial, Helvetica, PingFangSC, Microsoft Yahei, sans serif;
  &amp;.p1 {
    font-weight: 100;
  }
  &amp;.p2 {
    font-weight: 400;
  }
  &amp;.p3 {
    font-weight: 700;
  }
}

这里我指定的一组字体样式，而中文和英文字体的生效情况是不一样的，在chrome浏览器中，英文的字体是Helvetica生效的，而中文则是Microsoft YaHei

所以它们所支持的字重程度不同，就导致了文章开头出现的问题。

解决方案

1.更换字体

如果浏览器自带的字体无法满足我们的要求，我们可以通过下载字体文件，寻找可以替换的字体，以PingFang SC来举例

目前PingFang SC字体族提供了Thin，Ultralight，Light，Regular，Medium，Semibold这 6 种字重的字体。而PingFangSC-Regular（平方-简常规体）相当于PingFang SC字体族下面 400 的字重。

通过@font-face来实现

@font-face {
  font-family: 'PingFang SC Regular';
  src: url('../assets/fonts/PingFang\ SC\ Regular.ttf');
}

2.-webkit-text-stroke

如果更换字体所需要的成本比较大的话，可以试一下使用-webkit-text-stroke属性来实现

-webkit-text-stroke CSS属性为文本字符指定了宽和颜色 . 它是-webkit-text-stroke-width (en-US) 和-webkit-text-stroke-color (en-US)属性的缩写。

可以将-webkit-text-stroke理解为文字的内边距，如果我们想让文字变细，只需要将它的内边距的颜色设置为何背景相同即可，视觉上，文字整体都变得更细了。

html

<p className='p1'>The sky reflects the earth, and the sky makes the sound of rain</p>
<p className='p2'>The sky reflects the earth, and the sky makes the sound of rain</p>

css

p {
      text-align: left;
      font-family: Robot, Arial, Helvetica, PingFangSC, Microsoft Yahei, sans serif;
      &amp;.p1 {
        font-weight: 400;
      }
      &amp;.p2 {
        font-weight: 400;
        -webkit-text-stroke: 0.6px rgba(23, 39, 64, 0.75);
      }
}

最终效果