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-style
, font-variant
, font-weight
, font-stretch
, font-size
, line-height
, и font-family
. Кроме того, он позволяет установить системный шрифт для элементов интерфейса.
Интерактивный пример
Как и с любым сокращённым свойством, любое значение, которое не указано, устанавливается в начальное значение (возможно, переопределяя значения, ранее установленные с использованием не сокращённых свойств). Свойства font-size-Adjust
и font-kerning
хоть и не могут быть напрямую установлены с помощью font
, но они также сбрасываются к своим начальным значениям.
Синтаксис
The font
property may be specified as either a single keyword, which will select a system font, or as a shorthand for various font-related properties.
If font
is specified as a system keyword, it must be one of: caption
, icon
, menu
, message-box
, small-caption
, status-bar
.
If font
is specified as a shorthand for several font-related properties, then:
-
it must include values for:
-
it may optionally include values for:
-
font-style
,font-variant
andfont-weight
must precedefont-size
-
font-variant
may only specify the values defined in CSS 2.1, that isnormal
andsmall-caps
-
font-stretch
may only be a single keyword value. -
line-height
must immediately followfont-size
, preceded by "/", like this: "16px/3
" -
font-family
must be the last value specified.
Значения
<'font-style'>
-
See the
font-style
CSS property. <'font-variant'>
-
See the
font-variant
CSS property. <'font-weight'>
-
See the
font-weight
CSS property. <'font-stretch'>
-
See the
font-stretch
CSS property. <'font-size'>
-
See the
font-size
CSS property. <'line-height'>
-
See the
line-height
CSS property. <'font-family'>
-
See the
font-family
CSS property.
System font values
-
The system font used for captioned controls (e.g., buttons, drop-downs, etc.).
icon
-
The system font used to label icons.
-
The system font used in menus (e.g., dropdown menus and menu lists).
message-box
-
The system font used in dialog boxes.
-
The system font used for labeling small controls.
status-bar
-
The system font used in window status bars.
- Prefixed system font keywords
-
Browsers often implement several more, prefixed, keywords: Gecko implements
-moz-window
,-moz-document
,-moz-desktop
,-moz-info
,-moz-dialog
,-moz-button
,-moz-pull-down-menu
,-moz-list
, and-moz-field
.
Формальный синтаксис
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;
}
Live sample
Спецификации
Specification |
---|
CSS Fonts Module Level 4 # font-prop |
Начальное значение | как и у каждого из подсвойств этого свойства:
|
---|---|
Применяется к | all elements and text. Это также применяется к ::first-letter и ::first-line . |
Наследуется | да |
Проценты | как и у каждого из подсвойств этого свойства:
|
Обработка значения | как и у каждого из подсвойств этого свойства:
|
Animation type | как и у каждого из подсвойств этого свойства:
|
Совместимость с браузерами
BCD tables only load in the browser