5.4 CSS 字体速写

多个字体属性的速写方法

CSS支持把多个字体属性组合写在一个统一的属性 font 下面,这样代码更为简洁。

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

你可以把上述6个字体属性值的定义写成一个:

body{ font: italic small-caps bold 16px/1.5 Arial, sans-serif;}

请注意要遵循以上的书写顺序,并且在 font-sizeline-height 之间要用斜杠(slash)/ 分开。

尽管定义了6个属性,只有 font-sizefont-family 是必须明确定义的。其他一般情况下都可以使用默认值:

body{ font: bold 16px/1.5 Arial, sans-serif;}

font-stylefont-variant 没有被定义,它们将使用默认值 normal

特别提醒:通过速写方式定义的 font 属性会覆盖之前出现的字体属性定义(包括继承下来的)。特别是速写中忽略的属性,会被重置为默认值。

body{ font-size: 16px; line-height: 1.5;}
ul{ font: 14px Georgia, serif;}

在上述的 font 速写中,line-height 没有被定义,它将丢失从祖先元素body所继承的行高值:1.5,而被重置为默认值 medium(通常是 1.2)。

还有一些其他属性也支持类似的速写方式,比如 backgroundbordermargin