CSS 设置字体粗细

CSS 设置字体粗细的属性为 font-weight，并不是所有的字体都能够设置粗细，只有设备（电脑、手机等）安装了字体的粗细变体才可以，如果只安装了一种，例如 regular，那么就不能改变它的粗细程度。

CSS 设置字体粗细有三种方式：

• 使用数值，例如：font-weight: 400。
• 使用描述式文字，例如：font-weight: bold。
• 使用相对大小，例如：font-weight: bolder。

接下来我们分别看一下这三种方式。

使用数值

CSS 把字体粗细的数值分为了 100 - 950 这几个不同的级别，一般以 100 为一级，不过 CSS Fonts Level 4 支持使用任意数值的粗细了，这个浏览器支持还不够完善。我们来看一个例子，代码如下：

<style>
  p {
    font-family: "PingFang SC", "Microsoft Yahei", sans-serif;
  }

  p:first-child {
    font-weight: 400;
  }

  p:nth-child(2) {
    font-weight: 600;
  }

</style>
<p>这是 font-weight 为 400 的字体</p>
<p>这是 font-weight 为 600 的字体</p>

预览：

这里可以看到，font-weight 为 600 的字体，要比 400 的要粗。

使用描述式文字

CSS font-weight 还支持使用描述式文字的方式设置字体粗细，它有 normal 和 bold 两种，分别表示常规和加粗。来看一个例子，代码如下：

<style>
  p {
    font-family: "PingFang SC", "Microsoft Yahei", sans-serif;
  }

  p:first-child {
    font-weight: normal;
  }

  p:nth-child(2) {
    font-weight: bold;
  }

</style>
<p>这是 font-weight 为 normal 的字体</p>
<p>这是 font-weight 为 bold 的字体</p>

预览：

normal 对应的数字级别为 400， bold 对应的数字级别为 700。

使用相对粗细

CSS font-weight 也可以设置相对的粗细，同样使用描述式文字：bolder 和 lighter ，分别表示比上级元素的字体更粗或更细，例如下方代码所示：

<style>
  p {
    font-family: "PingFang SC", "Microsoft Yahei", sans-serif;
  }

  div {
    font-weight: 400;
  }

  p:first-child {
    font-weight: lighter;
  }

  p:nth-child(2) {
    font-weight: bolder;
  }

</style>
<div>
  <p>这是 font-weight 为 lighter 的字体</p>
  <p>这是 font-weight 为 bolder 的字体</p>
</div>

预览：

在这个例子中，div 父元素设置 font-weight 为 400 正常粗细，第一个 p 元素设置了 ligher，它相当与取了数字 100，第二个 p 设置了 bolder，相当与是 700。

lighter、bolder 和父级元素字体的 font-weight 的转换关系可以参考下表：

父元素字体粗细	bolder	lighter
100	400	100
200	400	100
300	400	100
400	700	100
500	700	100
600	900	400
700	900	400
800	900	700
900	900	700

小结

CSS 设置 font-weight 字体有三种方式：

• 使用数字。
• 使用描述式文字。
• 使用相对粗细。

其中数字为 100 - 950，从 100 到 900 每 100 一级，900 和 950 为 50 一级。描述式文字有 normal 和 bold，相对粗细有 bolder 和 lighter。