持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第30天，点击查看活动详情
前言
大家好呀，我是L同学。在上篇文章css属性-文本相关中，我们学习了css属性-文本相关的相关知识点，包括text-decoration、text-transform、text-indent、text-align、letter-spacing、word-spacing等等相关知识点。今天，在这篇文章中，我们将学习css属性-字体相关的知识点，包括font-weight、font-style、font-variant、line-height、font等相关知识点。
CSS属性-字体相关
font-weight
font-weight用于设置文字的粗细（重量）。font-weight常见的取值有这些值：100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 。每一个数字表示一个重量。其中normal表示等于400，bold表示等于700。
我们用到的strong、b、h1~h6等标签的font-weight默认就是bold。
font-style
font-style用于设置文字的常规、斜体显示。normal表示常规显示。italic(斜体)表示用字体的斜体显示(通常会有专门的字体)。oblique(倾斜)表示文本倾斜显示(仅仅是让文字倾斜)。
我们用到的em、i、cite、address、var、dfn等元素的font-style默认就是italic。
font-variant
font-variant可以影响小写字母的显示形式。variant翻译过来就是变形的意思。
font-variant可以设置的值以下这些：
- normal：常规显示
- small-caps：将小写字母替换为缩小过的大写字母
line-height
line-height用于设置文本的行高。行高我们可以先简单理解为一行文字所占据的高度。
行高的严格定义是两行文字基线（baseline）之间的间距。基线（baseline）是与小写字母x最底部对齐的线。
需要注意区分height和line-height的区别：
- height：元素的整体高度
- line-height：元素中每一行文字所占据的高度
假设div中只有一行文字，如何让这行文字在div内部垂直居中呢？答案是让line-height等同于height。
font
font是一个缩写属性。font 属性可以用来作为 font-style, font-variant, font-weight, font-size, line-height 和 font-family 属性的简写。
规则:
- font-style、font-variant、font-weight可以随意调换顺序，也可以省略
- /line-height可以省略，如果不省略，必须跟在font-size后面
- font-size、font-family不可以调换顺序，不可以省略
