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.
* Some parts of this feature may have varying levels of support.
Die font
CSS-Shorthand-Eigenschaft setzt alle verschiedenen Eigenschaften der Schriftart eines Elements. Alternativ setzt sie die Schriftart eines Elements auf eine Systemschrift.
Probieren Sie es aus
font:
1.2rem "Fira Sans",
sans-serif;
font:
italic 1.2rem "Fira Sans",
serif;
font: italic small-caps bold 16px/2 cursive;
font: small-caps bold 24px/1 sans-serif;
font: caption;
<section id="default-example">
<p id="example-element">
London. Michaelmas term lately over, and the Lord Chancellor sitting in
Lincoln's Inn Hall. Implacable November weather. As much mud in the streets
as if the waters had but newly retired from the face of the earth, and it
would not be wonderful to meet a Megalosaurus, forty feet long or so,
waddling like an elephantine lizard up Holborn Hill.
</p>
</section>
@font-face {
font-family: "Fira Sans";
src:
local("FiraSans-Regular"),
url("/shared-assets/fonts/FiraSans-Regular.woff2") format("woff2");
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: "Fira Sans";
src:
local("FiraSans-Italic"),
url("/shared-assets/fonts/FiraSans-Italic.woff2") format("woff2");
font-weight: normal;
font-style: italic;
}
section {
margin-top: 10px;
font-size: 1.1em;
}
Wie bei jeder Shorthand-Eigenschaft wird jeder nicht angegebene individuelle Wert auf seinen entsprechenden Initialwert gesetzt (möglicherweise überschreibt er Werte, die zuvor mit nicht-kurzschreibweise 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 ein einzelnes Schlüsselwort angegeben werden, das eine Systemschrift auswählt, oder als eine Kurzform für verschiedene schriftbezogene Eigenschaften.
Wenn font
als System-Schlüsselwort angegeben wird, muss es eines der folgenden sein: caption
, icon
, menu
, message-box
, small-caption
, status-bar
.
Wenn font
als Kurzform für mehrere schriftbezogene Eigenschaften angegeben wird, dann:
-
muss es Werte enthalten für:
-
kann es optional Werte enthalten für:
-
font-style
,font-variant
undfont-weight
müssenfont-size
vorausgehen. -
font-variant
darf nur die in CSS 2.1 definierten Werte angeben, das heißtnormal
undsmall-caps
. -
font-stretch
darf nur ein einzelnes Schlüsselwort sein. -
line-height
mussfont-size
unmittelbar folgen, vorausgegangen von "/", so:16px/3
. -
font-family
muss der letzte angegebene Wert sein.
Werte
<'font-style'>
-
Siehe die
font-style
CSS-Eigenschaft. <'font-variant'>
-
Siehe die
font-variant
CSS-Eigenschaft. <'font-weight'>
-
Siehe die
font-weight
CSS-Eigenschaft. <'font-stretch'>
-
Siehe die
font-stretch
CSS-Eigenschaft. <'font-size'>
-
Siehe die
font-size
CSS-Eigenschaft. <'line-height'>
-
Siehe die
line-height
CSS-Eigenschaft. <'font-family'>
-
Siehe die
font-family
CSS-Eigenschaft.
Systemschriftwerte
caption
-
Die Systemschrift, die für beschriftete Steuerelemente verwendet wird (z. B. Schaltflächen, Dropdowns, usw.).
icon
-
Die Systemschrift, die zum Beschriften 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.
small-caption
-
Die Systemschrift, die zum Beschriften kleiner Steuerelemente verwendet wird.
status-bar
-
Die Systemschrift, die in Fensterstatusleisten verwendet wird.
- Mit Präfix versehene Systemschrift-Schlüsselwörter
-
Browser implementieren häufig mehrere weitere, mit Präfix versehene, 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
Anfangswert | 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 |
left |
right |
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
Beispiele
Schrift-Eigenschaften festlegen
/* 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 |