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.
Die font
CSS-Kurzschreibweiseigenschaft legt alle verschiedenen Eigenschaften der Schriftart eines Elements fest. Alternativ setzt sie die Schriftart eines Elements auf eine Systemschrift.
Probieren Sie es aus
Wie bei jedem kurzschreibweiseigen Eigenschaftswert wird jeder einzelne Wert, der nicht angegeben ist, auf seinen entsprechenden Anfangswert gesetzt (möglicherweise werden Werte überschrieben, die zuvor mit nicht-kurzschreibweiseigen Eigenschaften festgelegt wurden). Obwohl nicht direkt durch font
einstellbar, werden die Langformen font-size-adjust
und font-kerning
ebenfalls auf ihre Anfangswerte zurückgesetzt.
Zusammengesetzte Eigenschaften
Diese Eigenschaft ist eine Kurzform für die folgenden CSS-Eigenschaften:
Syntax
/* 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;
Die font
-Eigenschaft kann entweder als einzelnes Schlüsselwort angegeben werden, das eine Systemschrift auswählt, oder als Abkürzung für verschiedene schriftbezogene Eigenschaften.
Wenn font
als Systemschlüsselwort angegeben wird, muss es eines der folgenden sein: caption
, icon
, menu
, message-box
, small-caption
, status-bar
.
Wenn font
als Abkürzung für mehrere schriftbezogene Eigenschaften angegeben wird, dann:
-
muss sie Werte für Folgendes beinhalten:
-
kann sie optional Werte für Folgendes beinhalten:
-
font-style
,font-variant
undfont-weight
müssenfont-size
vorausgehen. -
font-variant
darf nur die in CSS 2.1 definierten Werte spezifizieren, nämlichnormal
undsmall-caps
. -
font-stretch
darf nur einen einzelnen Schlüsselwortwert haben. -
line-height
muss unmittelbar auffont-size
folgen, und wird durch einen Schrägstrich getrennt, wie folgt:16px/3
. -
font-family
muss der letzte angegebene Wert sein.
Werte
<'font-style'>
-
Siehe die CSS-Eigenschaft
font-style
. <'font-variant'>
-
Siehe die CSS-Eigenschaft
font-variant
. <'font-weight'>
-
Siehe die CSS-Eigenschaft
font-weight
. <'font-stretch'>
-
Siehe die CSS-Eigenschaft
font-stretch
. <'font-size'>
-
Siehe die CSS-Eigenschaft
font-size
. <'line-height'>
-
Siehe die CSS-Eigenschaft
line-height
. <'font-family'>
-
Siehe die CSS-Eigenschaft
font-family
.
Systemschriftwerte
-
Die Systemschrift, die für beschriftete Steuerelemente verwendet wird (z. B. Schaltflächen, Dropdowns usw.).
icon
-
Die Systemschrift, die zur Beschriftung von Symbolen verwendet wird.
-
Die Systemschrift, die in Menüs verwendet wird (z. B. Dropdown-Menüs und Menüliste).
message-box
-
Die Systemschrift, die in Dialogfeldern verwendet wird.
-
Die Systemschrift, die zur Beschriftung kleiner Steuerelemente verwendet wird.
status-bar
-
Die Systemschrift, die in Fenster-Statusleisten verwendet wird.
- Präfixierte Systemschrift-Schlüsselwörter
-
Browser implementieren oft weitere, vorangestellte Schlüsselwörter: Gecko implementiert
-moz-window
,-moz-document
,-moz-desktop
,-moz-info
,-moz-dialog
,-moz-button
,-moz-pull-down-menu
,-moz-list
und-moz-field
.
Formale Definition
Initialer Wert | wie die jeweiligen Kurzschreibweisen:
|
---|---|
Anwendbar auf | all elements and text. Auch anwendbar auf ::first-letter und ::first-line . |
Vererbt | Ja |
Prozentwerte | wie die jeweiligen Kurzschreibweisen:
|
Berechneter Wert | wie die jeweiligen Kurzschreibweisen:
|
Animationstyp | wie die jeweiligen Kurzschreibweisen:
|
Formale Syntax
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
Beispiele
Schriftarten-Eigenschaften setzen
/* 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-Beispiel
Spezifikationen
Specification |
---|
CSS Fonts Module Level 4 # font-prop |
Browser-Kompatibilität
BCD tables only load in the browser