font
The font
CSS 简写属性 设置元素字体的所有不同属性。或者,它将元素的字体设置为系统字体。
试试
与任何简写属性一样,任何未指定的单个值都将设置为其对应的初始值(可能覆盖先前使用非简写属性设置的值)。虽然不能直接通过 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;
/* system font */
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
必须是最后指定的 value。
值
<'font-style'>
-
请参阅
font-style
CSS 属性。 <'font-variant'>
-
请参阅
font-variant
CSS 属性。 <'font-weight'>
-
请参阅
font-weight
CSS 属性。 <'font-stretch'>
-
请参阅
font-stretch
CSS 属性。 <'font-size'>
-
请参阅
font-size
CSS 属性。 <'line-height'>
-
请参阅
line-height
CSS 属性。 <'font-family'>
-
请参阅
font-family
CSS 属性。
系统字体值
-
用于带字幕控件(例如按钮、下拉菜单等)的系统字体。
icon
-
用于标记图标的系统字体。
-
菜单(例如下拉菜单和菜单列表)中使用的系统字体。
message-box
-
对话框中使用的系统字体。
-
用于标记小型控件的系统字体。
status-bar
-
窗口状态栏中使用的系统字体。
- 带前缀的系统字体关键字
-
浏览器通常会实现多个带前缀的关键字:Gecko 实现
-moz-window
、-moz-document
、-moz-desktop
、-moz-info
、-moz-dialog
、-moz-button
、-moz-pull-down-menu
、-moz-list
和-moz-field
。
正式定义
初始值 | 作为简写属性的每个属性
|
---|---|
应用于 | 所有元素和文本。它也应用于 ::first-letter 和 ::first-line 。 |
继承 | 是 |
百分比 | 作为简写属性的每个属性
|
计算值 | 作为简写属性的每个属性
|
动画类型 | 作为简写属性的每个属性
|
正式语法
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( kai ) |
generic( fangsong ) |
generic( nastaliq )
<generic-complete> =
serif |
sans-serif |
system-ui |
cursive |
fantasy |
math |
monospace
<generic-incomplete> =
ui-serif |
ui-sans-serif |
ui-monospace |
ui-rounded
示例
设置字体属性
/* 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 4 # font-prop |
浏览器兼容性
BCD 表格仅在浏览器中加载