文本样式

1. 字体样式

字体样式	说明
color	字体颜色
font-family	字体族
font-size	字体大小
font-style	字体风格
font-weight	字体粗细
text-decoration	字体装饰

• color：颜色值

  red,blue..：预定义颜色值

  #rrggbb：十六进制

  rgb(r,g,b)：红绿蓝三色值

  rgba(r, g, b, a)：带透明度的rgb

• font-family："字体名称", "备用字体", 通用字体族

  .font-family-example {
      font-family: "Microsoft YaHei", "PingFang SC", "Helvetica Neue", Arial, sans-serif;
  }

• font-size：数值+单位

  px：像素，绝对单位，最常用

  em：相对单位，相对父元素的大小比例

  rem：相对单位，相对根元素的大小比例

  %：相对单位，相对父元素的大小百分比

  vw,vh：相对单位，相对视窗宽度、高度的百分比

• font-style：预定义值

  normal：正常文本

  italic：斜体样式

  oblique：倾斜体样式

• font-weight：数值｜预定义值

  normal：正常粗细，对应数值400

  bold：粗体，对应数值700

  bolder：比父元素更粗

  lighter：比父元素更细

• text-decoration：线型 样式 颜色 粗细

  .text-decoration-example {
      text-decoration: underline wavy red 2px;
  }

2. 文本布局

字体样式	说明	常用取值
text-align	文本对齐	left,right,center,justify(两端对齐)
text-indent	文本缩进	20px,2em(相对于单个文字大小),10%, 50%
letter-spacing	文本字符间距	normal,1px, 0.1em, -1px
line-height	行高	normal , 1.2, 20px, 1.5em,120%

text-align 控制文本在它所在的块级盒子内的水平对齐方式

text-indent 仅对块级元素生效

text-height 值等于盒子高度时可以实现文本垂直居中

3. font简写

对于上述文本样式可以使用font简写，语法如下：

.font-example {
    font: font-style font-weight font-size/line-height font-family;
}

顺序不能变，其中 font-size，font-family 为必填选项

示例：小米官网的font样式：

4. 文本样式的继承性

子元素自动集成父元素的跟文字相关的样式属性，如字体、颜色、文本等