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。
一系列的课程让你成为高级前端工程师。课程覆盖工作中所有常用的知识点和背后的使用逻辑,示例全部都为工作项目简化而来,学完即可直接上手开发!
即使你已经是高级前端工程师,在课程里也可能会发现新的知识点和技巧,让你的工作更加轻松!
《React 完全指南》课程,连载中现只需 48 元(领取优惠券)点击查看详情。
《Vue 3.x 全家桶完全指南与实战》课程,包括 Vue 3.x、TypeScript、Vue Router 4.x、Vuex 4.x 所有初级到高级的语法特性详解,让你完全胜任 Vue 前端开发的工作。点击查看详情。
《React即时通信UI实战》课程,利用 Storybook、Styled-components、React-Spring 打造属于自己的组件库。
《JavaScript 基础语法详解》本人所著图书,包含 JavaScript 全面的语法知识和新特性, 可在京东、当当、淘宝等各大电商购买