CSS字体

CSS font-family 属性

在 CSS 中，我们使用 font-family 属性规定文本的字体。

如果字体名称不止一个单词，则必须用引号引起来，例如："Times New Roman"。

值	描述
family-name generic-family	用于某个元素的字体族名称或/及类族名称的一个优先表。 默认值：取决于浏览器。
inherit	规定应该从父元素继承字体系列。

字体样式

font-style 属性主要用于指定斜体文本。

值	描述
normal	默认值。浏览器显示一个标准的字体样式。
italic	浏览器会显示一个斜体的字体样式。
oblique	浏览器会显示一个倾斜的字体样式。
inherit	规定应该从父元素继承字体样式。

字体粗细

font-weight 属性指定字体的粗细。

值	描述
normal	默认值。定义标准的字符。
bold	定义粗体字符。
bolder	定义更粗的字符。
lighter	定义更细的字符。
100-900	定义由粗到细的字符。400 等同于 normal，而 700 等同于 bold。
inherit	规定应该从父元素继承字体的粗细。

字体变体

font-variant 属性指定是否以 small-caps 字体（小型大写字母）显示文本。

值	描述
normal	默认值。浏览器会显示一个标准的字体。
small-caps	浏览器会显示小型大写字母的字体。
inherit	规定应该从父元素继承 font-variant 属性的值。

字体大小

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	把 font-size 设置为一个固定的值。
%	把 font-size 设置为基于父元素的一个百分比值。
inherit	规定应该从父元素继承字体尺寸。

以像素设置字体大小

使用像素设置文本大小可以完全控制文本大小。

用 em 设置字体大小

1em 等于当前字体大小。浏览器中的默认文本大小为 16px。因此，默认大小 1em 为 16px。

字体属性

为了缩短代码，也可以在一个属性中指定所有单个字体属性。

font 属性是以下属性的简写属性：

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

p.b {
  font: italic small-caps bold 12px/30px Georgia, serif;
}

 

 注意：font-size 和 font-family 的值是必需的。如果缺少其他值之一，则会使用其默认值。

属性	描述
font	简写属性。在一条声明中设置所有字体属性。
font-family	规定文本的字体系列（字体族）。
font-size	规定文本的字体大小。
font-style	规定文本的字体样式。
font-variant	规定是否以小型大写字母的字体显示文本。
font-weight	规定字体的粗细。

 参考：w3school 在线教程