字体样式概览

1、font-size

• 单位
  • px
  • em(相对于父元素的font-size)
  • %(相对于父元素的font-size)

2、font-family(重要，一般只设置一次，可继承)

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

3、font-weight

• 设置字体的粗细
• 常见取值
  • 100|200|300|400（默认）|500|600|700（常用）|800|900
  • normal、bold、light

4、font-style

• 常见取值
  • italic（字体本身支持斜体时，显示斜体）/oblicue（设置倾斜）
  • normal（常规显示）

5、font-variant(了解、基本不用、针对英文)

• 影响小写字母的显示形式
• 常见取值：
  • mormal
  • small-caps(实现小写字母大写，但是占据高度和小写字母一样)

6、line-height

• 用于设置文本行高

  • 简单理解为一行文本所占据的高度

• 行高的严格定义：两行文字基线（baseline）之间的间距

• 基线（baseline）：小写字母x最底部对齐的线

• 顶线-中线-基线-底线

• 行高-文本间距=文本高度

7、font缩写属性

• font是一个缩写属性
  • font属性可以用来作为font-style,font-variant,font-weight,font-size,line-height,font-family属性简写
  • font-style font-variant font-weight font-size/line-height font-family
• 规则
  • font-style font-variant font-weight可以随意调换顺序，也可以省略
  • /line-height可以省略，如果不省略，必须跟在font-size后面（表示font-size*n）
  • font-size font-family不可以调换顺序，不可以省略