font

CSS 中的 font 属性是一个简写属性，它将所有以下子属性组合在一个声明中。

body {
  font: normal small-caps normal 16px/1.4 Georgia;
}

/* is the same as:

body {
  font-family: Georgia;
  line-height: 1.4;
  font-weight: normal;
  font-stretch: normal;
  font-variant: small-caps;
  font-size: 16px;
}
 */

font 有七个子属性，包括

• font-stretch: 此属性设置字体宽度，例如缩小或展开。
  • normal
  • ultra-condensed
  • extra-condensed
  • condensed
  • semi-condensed
  • semi-expanded
  • expanded
  • extra-expanded
  • ultra-expanded
• font-style: 使文本显示为斜体或倾斜。
  • normal
  • italic
  • oblique
  • inherit
• font-variant: 将目标文本更改为小型大写。
  • normal
  • small-caps
  • inherit
• font-weight: 设置字体的粗细或厚度。
  • normal
  • bold
  • bolder
  • lighter
  • 100, 200, 300, 400, 500, 600, 700, 800, 900
  • inherit
• font-size: 设置字体的字高。
  • xx-small
  • x-small
  • small
  • medium
  • large
  • x-large
  • xx-large
  • smaller, larger
  • percentage
  • inherit
• line-height: 定义内联元素上下的间距。
  • normal
  • number (font-size multiplier)
  • percentage
• font-family: 定义应用于元素的字体。
  • sans-serif
  • serif
  • monospace
  • cursive
  • fantasy
  • caption
  • icon
  • menu
  • message-box
  • small-caption
  • status-bar
  • "string"

字体简写陷阱

font 属性不像其他简写属性那样简单，部分原因是其语法要求，部分原因是继承问题。

以下是使用此简写属性时应了解的一些事项的摘要。

必填值

font 简写中的两个值是必填的：font-size 和 font-family。如果这两个值中任何一个未包含，则整个声明将被忽略。

此外，font-family 必须声明为所有值的最后一个，否则，整个声明将被忽略。

可选值

其他五个值都是可选的。如果您包含任何 font-style、font-variant 和 font-weight，它们必须在声明中出现在 font-size 之前。如果它们没有，它们将被忽略，并且也可能导致必填值被忽略。

body {
    font: italic small-caps bold 44px Georgia, sans-serif;
}

在上面的示例中，包含了三个可选值。只要这些值在 font-size 之前定义，它们就可以以任何顺序放置。

同样，包含 line-height 是可选的，但只能在 font-size 之后声明，并且只能在斜杠之后。

body {
    font: 44px/20px Georgia, sans-serif;
}

在上面的示例中，line-height 为“20px”。如果您省略 line-height，您也必须省略斜杠，否则整行将被忽略。

使用 font-stretch

font-stretch 属性是 CSS3 中的新属性，因此如果它在不支持 font 简写中的 font-stretch 的旧浏览器中使用，则会导致整行被忽略。

规范建议包含一个没有 font-stretch 的备用方案，如下所示

body {
    font: italic small-caps bold 44px Georgia, sans-serif; /* fallback for older browsers */
    font: ultra-condensed italic small-caps bold 44px Georgia, sans-serif;
}

可选值的继承

如果您省略任何可选值（包括 line-height），省略的可选值将不会从其父元素继承值，就像通常的排版属性那样。相反，它们将重置为其初始状态。

例如

body {
    font: italic small-caps bold 44px/50px Georgia, sans-serif;
}

p {
    font: 30px Georgia, sans-serif;
}

在这种情况下，可选值（斜体、小型大写和粗体）被放置在 元素上的 font 声明中。这些值也将应用于大多数子元素。

但是，因为我们在段落元素上重新声明了 font 属性，所以所有可选值将在段落上重置，导致样式、变体、粗细和行高恢复为其初始值。

用于定义系统字体的关键字

除了以上语法之外，font 属性还允许使用关键字作为值。它们是

• caption
• icon
• menu
• message-box
• small-caption
• status-bar

这些关键字值将字体设置为用户操作系统中用于该特定类别的字体。例如，定义“caption”将设置该元素上的字体，以使用操作系统中用于带标题的控件（按钮、下拉菜单等）的相同字体。

单个关键字构成整个值

body {
    font: menu;
}

前面提到的其他属性与这些关键字不兼容。这些关键字只能与 font 简写一起使用，不能使用任何单独的完整属性声明。

相关属性

• font-stretch
• font-variant
• font-style
• font-weight
• line-height
• font-size
• font-family
• CSS 中的操作系统特定字体

更多信息

• W3C 规范
• CSS-Tricks 文章: px – em – % – pt – 关键字
• Jonathan Snook: 使用 rem 的字体大小
• CSS 字体简写属性入门
• CSS 字体简写属性备忘单

浏览器支持

Chrome	Safari	Firefox	Opera	IE	Android	iOS
任何	任何	任何	任何	任何	任何	任何