font
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
CSS 简写属性 font
可设置某元素字体的不同属性,或将元素的字体设置为系统字体。
尝试一下
与任何简写属性一样,任何未指定的值都将设置为其对应的初始值(可能覆盖先前使用非简写属性设置的值)。虽然不能通过 font
直接设置,但是 font-size-adjust
和 font-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
指定为系统关键字,则它必须是 caption
、icon
、menu
、message-box
、small-caption
、status-bar
之一。
如果 font
指定为字体相关的属性的简写:
-
必须包含以下值:
-
可以选择性包含以下值:
-
font-style
、font-variant
和font-weight
必须在font-size
之前 -
font-variant
只可以使用 CSS 2.1 定义的值,即normal
和small-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
。
形式定义
初始值 | 该简写所对应的每个属性:
|
---|---|
适用元素 | 所有元素和文本. It also applies to ::first-letter and ::first-line . |
是否是继承属性 | 是 |
Percentages | 该简写所对应的每个属性:
|
计算值 | 该简写所对应的每个属性:
|
动画类型 | 该简写所对应的每个属性:
|
形式语法
font =
[ [ <'font-style'> || <font-variant-css2> || <'font-weight'> || <font-width-css3> ]? <'font-size'> [ / <'line-height'> ]? <'font-family'># ] |
<system-family-name>
<font-style> =
normal |
italic |
oblique <angle [-90deg,90deg]>?
<font-variant-css2> =
normal |
small-caps
<font-weight> =
<font-weight-absolute> |
bolder |
lighter
<font-width-css3> =
normal |
ultra-condensed |
extra-condensed |
condensed |
semi-condensed |
semi-expanded |
expanded |
extra-expanded |
ultra-expanded
<font-size> =
<absolute-size> |
<relative-size> |
<length-percentage [0,∞]> |
math
<line-height> =
normal |
<number [0,∞]> |
<length-percentage [0,∞]>
<font-family> =
[ <family-name> | <generic-family> ]#
<system-family-name> =
caption |
icon |
menu |
message-box |
small-caption |
status-bar
<font-weight-absolute> =
normal |
bold |
<number [1,1000]>
<length-percentage> =
<length> |
<percentage>
<family-name> =
<string> |
<custom-ident>+
<generic-family> =
<generic-script-specific> |
<generic-complete> |
<generic-incomplete>
<generic-script-specific> =
generic( fangsong ) |
generic( kai ) |
generic( khmer-mul ) |
generic( nastaliq )
<generic-complete> =
serif |
sans-serif |
system-ui |
cursive |
fantasy |
math |
monospace
<generic-incomplete> =
ui-serif |
ui-sans-serif |
ui-monospace |
ui-rounded
示例
设置字体属性
/* 设置字体大小为 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 |
浏览器兼容性
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
font | ||||||||||||
caption | ||||||||||||
Support for font-stretch values in shorthand | ||||||||||||
icon | ||||||||||||
menu | ||||||||||||
message-box | ||||||||||||
small-caption | ||||||||||||
status-bar |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support