#

字体属性

font-size

用于设置字体的大小
常用的设置

• 具体数值+单位
  比如 100px
  也可以使用 em 做单位，1em 代表 100%，2em 代表 200%, 0.5em 代表 50%
  em 是相对于父元素的字体值的大小设置的
• 百分比 基于父元素的font-size计算，比如 50%表示等于父元素 font-size 的一半
• font-size 属性具有继承的属性，因此字体的默认大小就是父元素中字体的大小

font-family

作用：用于设置文字的字体名称

• 可以设置一个或者多个字体名称
• 浏览器会选择列表中第一个该计算机上安装的字体
• 也可以使用@font-face指定的可以直接下载的字体

font-weight

作用：用于设置字体的粗细

常见的取值

• 数字 100|200|...
• normal 表示 400
• bold 表示 700

strong, h1~h6, b 等标签的 font-weight 默认就是 bold

font-style

作用：用于设置文字的常规、斜体显示

常见的取值

• normal: 常规显示
• italic(斜体): 斜体显示字体
• oblique(倾斜): 文本倾斜显示，仅让文字倾斜
• em、i、cite、address、var、dfn 等元素的 font-style 默认就是 italic

font-variant--已基本不用

作用：影响小写字母的显示形式

取值

• normal: 常规显示
• small-caps: 将小写字母替换为缩小过的大写字母，就是占据的高度仍然是小写字母字体的高度

line-height

作用：用于设置文本的行高
行高可以理解为一行文字所占据的高度

行高的严格定义是两行文字基线之间的距离
基线(baseline): 与小写字母x最底部对齐的线

区分 height 和 line-height

• height: 元素的整体高度
• line-height: 元素中每一行文字所占据的高度

  应用场景

假设 div 中只有一行文字，让这一行文字在 div 内部垂直居中
方案：让 line-height 等同于 height

font 属性

font 是一个缩写属性，其中包含了 font-style、font-variant、font-weight、font-size、font-height、font-family 属性的简写

规则

• font-style、font-variant、font-weight 顺序可以随意调换，也可以省略
• /line-height 可以省略，如果不省略必须跟在 font-size 后面
• font-size、font-family 不可以调换顺序，不可以省略