Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten. Erfahre mehr über dieses Experiment.

View in English Always switch to English

font

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨Juli 2015⁩.

* Some parts of this feature may have varying levels of support.

Die font CSS Kurzschreibweise setzt alle verschiedenen Eigenschaften einer Schriftart eines Elements. Alternativ stellt es die Schriftart eines Elements auf eine Systemschriftart ein.

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 Kurzschreibweise wird jeder einzelne Wert, der nicht angegeben ist, auf seinen entsprechenden Anfangswert gesetzt (möglicherweise werden zuvor gesetzte Werte durch nicht-Kurzschreibweise überschrieben). Obwohl nicht direkt durch font einstellbar, werden die Langformen font-size-adjust und font-kerning ebenfalls auf ihre Anfangswerte zurückgesetzt.

Bestandteileigenschaften

Diese Eigenschaft ist eine Kurzform für folgende CSS-Eigenschaften:

Syntax

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;

Die font-Eigenschaft kann entweder als ein einzelnes Schlüsselwort angegeben werden, das eine Systemschriftart auswählt, oder als eine Kurzform 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 Kurzform für mehrere schriftbezogene Eigenschaften angegeben wird, dann gilt:

  • es muss Werte enthalten für:

  • es kann optional Werte enthalten für:

  • font-style, font-variant und font-weight müssen font-size vorausgehen.

  • font-variant darf nur die in CSS 2.1 definierten Werte normal und small-caps spezifizieren.

  • font-stretch darf nur ein einzelner Schlüsselwortwert sein.

  • line-height muss direkt font-size folgen, getrennt durch "/", wie folgt: 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 Systemschriftart, die für beschriftete Steuerelemente verwendet wird (z.B. Schaltflächen, Dropdowns, etc.).

icon

Die Systemschriftart, die zum Beschriften von Symbolen verwendet wird.

Die Systemschriftart, die in Menüs verwendet wird (z.B. Dropdown-Menüs und Menüliste).

message-box

Die Systemschriftart, die in Dialogfeldern verwendet wird.

small-caption

Die Systemschriftart, die zum Beschriften kleiner Steuerelemente verwendet wird.

status-bar

Die Systemschriftart, 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

Anfangswertwie die jeweiligen Kurzschreibweisen:
Anwendbar aufall elements and text. Auch anwendbar auf ::first-letter und ::first-line.
VererbtJa
Prozentwertewie die jeweiligen Kurzschreibweisen:
  • font-size: bezieht sich auf die Schriftgröße des Elternelements
  • line-height: bezieht sich auf die Schriftgröße des Elternelements
Berechneter Wertwie die jeweiligen Kurzschreibweisen:
Animationstypwie 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

Festlegen von Schriftarteigenschaften

css
/* 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

Siehe auch