跳到主要内容位置

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 还支持使用描述式文字的方式设置字体粗细,它有 normalbold 两种,分别表示常规和加粗。来看一个例子,代码如下:

<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 也可以设置相对的粗细,同样使用描述式文字:bolderlighter ,分别表示比上级元素的字体更粗或更细,例如下方代码所示:

<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 的转换关系可以参考下表:

父元素字体粗细bolderlighter
100400100
200400100
300400100
400700100
500700100
600900400
700900400
800900700
900900700

小结#

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

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

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