本节主要关注文字如何展示。

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-style 值作用
normal默认值。浏览器显示一个标准的字体样式。
italic浏览器会显示一个斜体的字体样式。
oblique浏览器会显示一个倾斜的字体样式。
inherit规定应该从父元素继承字体样式。

font-variant

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

.text{
  font-variant: normal | small-caps | inherit;
}
font-variant 值作用
normal 默认值。浏览器会显示一个标准的字体。
small-caps 浏览器会显示小型大写字母的字体。
inherit 规定应该从父元素继承 font-variant 属性的值。

font-weight

设置文本的粗细。

.text{
  font-weight: normal | bold | bolder | lighter | 具体值 | inherit;
}
font-weight 值作用
normal 默认值。定义标准的字符。
bold 定义粗体字符。
bolder 定义更粗的字符。
lighter 定义更细的字符。
100/200/300/400/500/600/700/800/900 定义由粗到细的字符。400 等同于 normal，而 700 等同于 bold。
inherit 规定应该从父元素继承字体的粗细。

font-size

设置字体的尺寸。

.text{
  font-size: 28px | small | smaller | larger | 80% | inherit;
}
font-size 值作用
xx-small/x-small/small/medium/large/x-large/xx-large把字体的尺寸设置为不同的尺寸，从 xx-small 到 xx-large。默认值：medium。
smaller 把 font-size 设置为比父元素更小的尺寸。
larger 把 font-size 设置为比父元素更大的尺寸。
length（如：28px）把 font-size 设置为一个固定的值。
% （如：80%）把 font-size 设置为基于父元素的一个百分比值。
inherit 规定应该从父元素继承字体尺寸。

line-height

设置行间距离（行高）。

.text{
  line-height: 28px | normal | number | 80% | inherit;
}
line-height 值作用
normal 默认。设置合理的行间距。
number 设置数字，此数字会与当前的字体尺寸相乘来设置行间距。
length（如：28px）设置固定的行间距。
% （如：80%）基于当前字体尺寸的百分比行间距。
inherit 规定应该从父元素继承 line-height 属性的值。

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 可以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体，则会尝试下一个，直到找到可识别的第一个值。
font-family 值作用
family-name/generic-family用于某个元素的字体族名称或/及类族名称的一个优先表。默认值：取决于浏览器。
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 可以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体，则会尝试下一个，直到找到可识别的第一个值。
font-family 值作用
family-name/generic-family用于某个元素的字体族名称或/及类族名称的一个优先表。默认值：取决于浏览器。
inherit 规定应该从父元素继承字体系列。