font

CSS 简写属性 font 可设置某元素字体的不同属性,或将元素的字体设置为系统字体。

尝试一下

与任何简写属性一样,任何未指定的值都将设置为其对应的初始值(可能覆盖先前使用非简写属性设置的值)。虽然不能通过 font 直接设置,但是 font-size-adjustfont-kerning 也会重置为初始值。

组成属性

语法

css
/* font-size font-family */
font: 1.2em "Fira Sans", sans-serif;

/* font-size/line height font-family */
font: 1.2em/2 "Fira Sans", sans-serif;

/* font-style font-weight font-size font-family */
font: italic bold 1.2em "Fira Sans", sans-serif;

/* font-stretch font-variant font-size font-family */
font: ultra-condensed small-caps 1.2em "Fira Sans", sans-serif;

/* 系统字体 */
font: caption;

可以将 font 属性指定为单个关键字,它将选择系统字体,或者作为字体相关的属性的简写。

如果将 font 指定为系统关键字,则它必须是 captioniconmenumessage-boxsmall-captionstatus-bar 之一。

如果 font 指定为字体相关的属性的简写:

  • 必须包含以下值:
  • 可以选择性包含以下值:
  • font-stylefont-variantfont-weight 必须在 font-size 之前
  • font-variant 只可以使用 CSS 2.1 定义的值,即 normalsmall-caps
  • font-stretch 必须是单个关键字值
  • line-height 必须跟在 font-size 后面,由“/”分隔,例如“16px/3
  • font-family 必须最后指定

<'font-style'>

font-style 属性。

<'font-variant'>

font-variant 属性。

<'font-weight'>

font-weight 属性。

<'font-stretch'>

font-stretch 属性。

<'font-size'>

font-size 属性。

<'line-height'>

line-height 属性。

<'font-family'>

font-family 属性。

系统字体

caption

用于标题控件(如按钮、下拉列表等)的系统字体。

icon

用于标签图标的系统字体。

菜单中(如下拉菜单和菜单列表)使用的系统字体。

message-box

用于对话框的系统字体。

small-caption

用于小标题控件的系统字体。

status-bar

用于窗口状态栏的系统字体。

带前缀的系统字体关键字

浏览器经常会实现多个带前缀的关键字;Gecko 实现了 -moz-window-moz-document-moz-desktop-moz-info-moz-dialog-moz-button-moz-pull-down-menu-moz-list-moz-field

形式定义

初始值as each of the properties of the shorthand:
适用元素all elements and text. It also applies to ::first-letter and ::first-line.
是否是继承属性yes
Percentagesas each of the properties of the shorthand:
  • font-size: refer to the parent element's font size
  • line-height: refer to the font size of the element itself
计算值as each of the properties of the shorthand:
  • font-style: as specified
  • font-variant: as specified
  • font-weight: the keyword or the numerical value as specified, with bolder and lighter transformed to the real value
  • font-stretch: as specified
  • font-size: as specified, but with relative lengths converted into absolute lengths
  • line-height: for percentage and length values, the absolute length, otherwise as specified
  • font-family: as specified
Animation typeas each of the properties of the shorthand:

形式语法

font = 
[ [ <'font-style'> || <font-variant-css2> || <'font-weight'> || <font-width-css3> ]? <'font-size'> [ / <'line-height'> ]? <'font-family'> ] |
<system-family-name>

<font-variant-css2> =
normal |
small-caps

<font-width-css3> =
normal |
ultra-condensed |
extra-condensed |
condensed |
semi-condensed |
semi-expanded |
expanded |
extra-expanded |
ultra-expanded

<system-family-name> =
caption |
icon |
menu |
message-box |
small-caption |
status-bar

示例

设置字体属性

css
/* 设置字体大小为 12px,行高为 14px,字体家族为 sans-serif */
p {
  font: 12px/14px sans-serif;
}

/* 将字体大小设置为父元素的 80% 或默认值(如果没有父元素存在),设置字体家族为 sans-serif */
p {
  font: 80% sans-serif;
}

/* 设置字体粗细为 bold,
   风格为斜体,
   大小为 large,
   家族为 serif。*/
p {
  font: bold italic large serif;
}

/* 使用与窗体状态栏一致的字体 */
p {
  font: status-bar;
}

运行实例

规范

Specification
CSS Fonts Module Level 4
# font-prop

浏览器兼容性

BCD tables only load in the browser

参见