MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

概述

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

和其它的CSS简写属性一样,该属性中未被设置的属性值使用它们各自的初始值,并覆盖之前由非简写的属性设置的值。

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

初始值as each of the properties of the shorthand:
适用元素all elements. 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
适用媒体visual
计算值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
是否适用于 CSS 动画as 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-style 属性。
<'font-variant'>
font-variant 属性。
<'font-weight'>
font-weight 属性。
<'font-size'>
font-size 属性。
<'line-height'>
line-height 属性。
<'font-family'>
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

where
<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
font
Candidate Recommendation 添加对 font-stretch 的支持
CSS Level 2 (Revision 1)
font-weight
Recommendation 添加对关键字的支持
CSS Level 1
font
Recommendation 初始定义

浏览器兼容性

特性 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,