We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS


font 属性是设置 font-style, font-variant, font-weight, font-size, line-heightfont-family属性的简写,或使用特定的关键字设置元素的字体为某个系统字体。


注意: 在使用 CSS font 简写属性时有几条注意事项。如果不符合这些情况,该属性将无效并被完全忽略。

初始值as each of the properties of the shorthand:
适用元素all elements. It also applies to ::first-letter and ::first-line.
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:
正规顺序order of appearance in the formal grammar of the values


/* size | family */
font: 2em "Open Sans", sans-serif;

/* style | size | family */
font: italic 2em "Open Sans", sans-serif;

/* style | variant | weight | size/line-height | family */
font: italic small-caps bolder 16px/3 cursive;

/* The font used in system dialogs */
font: message-box;

font-style 属性。
font-variant 属性。
font-weight 属性。
font-size 属性。
line-height 属性。
font-family 属性。
caption icon menu message-box small-caption status-bar
caption 用于标题控件(如按钮,下拉列表等)的字体。
icon 用于标签图标的字体。
menu 菜单中(如下拉菜单和菜单列表)使用的字体。
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.


[ [ <'font-style'> || <font-variant-css21> || <'font-weight'> || <'font-stretch'> ]? <'font-size'> [ / <'line-height'> ]? <'font-family'> ] | caption | icon | menu | message-box | small-caption | status-bar

<font-variant-css21> = [ normal | small-caps ]


/* Set the font size to 12px and the line height to 14px. Set the font family to sans-serif */
p { font: 12px/14px sans-serif }
/* Set the font size to 80% of the parent element or default value (if no parent element present) 
and set the font family to sans-serif */ 
p { font: 80% sans-serif }
/* Set the font weight to bold, the font-style to italic, the font size to large, 
and the font family to serif. */
p { font: bold italic large serif }
/* Use the same font as the status bar of the window */
p { font: status-bar }



规范 状态 注释
CSS Fonts Module Level 3
Candidate Recommendation 添加对 font-stretch 的支持
CSS Level 2 (Revision 1)
Recommendation 添加对关键字的支持
CSS Level 1
Recommendation 初始定义


We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

特性 Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
简写 1.0 1.0 (1.0) 3.0-4.0 3.5 1.0 (85)
系统字体 1.0 1.0 (1.0) 4.0-5.5 6.0 1.0 (85)
特性 Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
基础特性支持 ? ? ? ? ?


此页面的贡献者: xhlsrj, fscholz, Sebastianz, FredWe
最后编辑者: xhlsrj,