font

概述

font 属性可以用来作为 font-style, font-variant, font-weight, font-size, line-heightfont-family 属性的简写,或将元素的字体设置为系统字体。

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

语法

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

如果将 font 指定为系统关键字,则它必须是以下之一:caption, icon, menu, message-box, small-caption, status-bar

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

  • 必须包含以下值:
  • 可以选择性包含以下值:
  • font-style, font-variantfont-weight 必须在 font-size 之前
  • 在 CSS 2.1 中 font-variant 只可以是 normalsmall-caps
  • line-height 必须跟在 font-size 后面,由 "/" 分隔,例如 "16px/3"
  • font-family 必须最后指定

<'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
用于标签图标的系统字体。
菜单中(如下拉菜单和菜单列表)使用的系统字体。
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).
   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 初始定义

浏览器兼容性

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
fontChrome Full support 1Edge Full support 12Firefox Full support 1IE Full support 3Opera Full support 3.5Safari Full support 1WebView Android Full support ≤37Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support YesSafari iOS Full support 1Samsung Internet Android Full support Yes
Support for font-stretch values in shorthandChrome Full support 60Edge No support NoFirefox Full support 43IE No support NoOpera Full support 47Safari Full support 11WebView Android Full support 60Chrome Android Full support 60Firefox Android Full support 43Opera Android Full support 44Safari iOS Full support 11Samsung Internet Android Full support 8.0
System fontsChrome Full support 1Edge Full support 12Firefox Full support 1IE Full support 4Opera Full support 6Safari Full support 1WebView Android Full support 37Chrome Android Full support 18Firefox Android Full support 4Opera Android ? Safari iOS Full support 1Samsung Internet Android ?

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown