本节主要关注文字如何展示。
文本颜色由 "color" 属性设置。

font

在一个声明中设置所有字体属性。
试一试

.text{
  font:italic arial,sans-serif;
}

可以按顺序设置如下属性：

• font-style
• font-variant
• font-weight
• font-size/line-height
• font-family

font-style

该属性设置使用斜体、倾斜或正常字体。

.text{
  font-style: normal | italic | oblique | inherit;
}

font-variant

font-variant 属性设置小型大写字母的字体显示文本，这意味着所有的小写字母均会被转换为大写，但是所有使用小型大写字体的字母与其余文本相比，其字体尺寸更小。

.text{
  font-variant: normal | small-caps | inherit;
}

font-weight

设置文本的粗细。

.text{
  font-weight: normal | bold | bolder | lighter | 具体值 | inherit;
}

font-size

设置字体的尺寸。

.text{
  font-size: 28px | small | smaller | larger | 80% | inherit;
}

font-family

规定元素的字体系列。

.text{
  font-family: "SF Pro SC","SF Pro Text","SF Pro Icons","PingFang SC", Verdana, Arial, '微软雅黑','宋体';
}

有两种类型的字体系列名称：

指定的系列名称：具体字体的名称，比如："times"、"courier"、"arial"。
通常字体系列名称：比如："serif"、"sans-serif"、"cursive"、"fantasy"、"monospace"

font-family 可以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体，则会尝试下一个，直到找到可识别的第一个值。

line-height

设置行间距离（行高）。

.text{
  line-height: 28px | normal | number | 80% | inherit;
}

text

text-align

规定元素中的文本的水平对齐方式。

.text{
  text-align: left | right | center | justify | inherit;
}

文本水平垂直居中

text-align与line-height配合使用可以使文本水平方向和垂直方向都居中。

.text{
  height: 50px;
  text-align: center;
  line-height: 50px;
}

将line-height设置成height同样的高度，就能达到垂直居中的效果，水平居中由 text-align控制。

text-decoration

文本的修饰。

试一试

.text{
  text-decoration: none | underline | overline | line-through | blink | inherit;
}

text-decoration 衍生属性：

• text-decoration-color
• text-decoration-line
• text-decoration-style

text-shadow

当文本溢出包含元素时如何处理。

.text{
  text-shadow: clip | ellipsis | string;
}

text-transform

控制文本的大小写。

.text{
  text-transform: clip | ellipsis | string;
}

text-indent

规定文本块中首行文本缩进的距离。

.text{
  text-indent: 50px | 20% | inherit;
}

text-justify

规定当 text-align 被设置为 justify 时的齐行方法。

.text{
  text-align:justify;
  text-justify: auto | inter-word | inter-ideograph | inter-cluster | distribute | kashida | trim;
}