font

Die CSS-Eigenschaft font ist eine Kurzschreibweise, die alle folgenden Untereigenschaften in einer einzigen Deklaration kombiniert.

body {
  font: normal small-caps normal 16px/1.4 Georgia;
}

/* is the same as:

body {
  font-family: Georgia;
  line-height: 1.4;
  font-weight: normal;
  font-stretch: normal;
  font-variant: small-caps;
  font-size: 16px;
}
 */

Es gibt sieben font-Untereigenschaften, darunter

• font-stretch: Diese Eigenschaft legt die Schriftbreite fest, z. B. kondensiert oder erweitert.
  • normal
  • ultra-kondensiert
  • extra-kondensiert
  • kondensiert
  • semi-kondensiert
  • semi-erweitert
  • erweitert
  • extra-erweitert
  • ultra-erweitert
• font-style: lässt den Text kursiv oder schräg erscheinen.
  • normal
  • kursiv
  • schräg
  • inherit
• font-variant: ändert den Zieltext in kleine Majuskeln.
  • normal
  • kleine Majuskeln
  • inherit
• font-weight: legt das Gewicht oder die Dicke der Schriftart fest.
  • normal
  • fett
  • fetter
  • leichter
  • 100, 200, 300, 400, 500, 600, 700, 800, 900
  • inherit
• font-size: legt die Höhe der Schriftart fest.
  • xx-klein
  • x-klein
  • klein
  • mittel
  • groß
  • x-groß
  • xx-groß
  • kleiner, größer
  • percentage (Prozentwert)
  • inherit
• line-height: definiert den Abstand über und unter Inline-Elementen.
  • normal
  • Zahl (Schriftgrößen-Multiplikator)
  • percentage (Prozentwert)
• font-family: definiert die Schriftart, die auf das Element angewendet wird.
  • serifenlos
  • serifen
  • monospaced
  • kursive
  • fantasy
  • caption
  • icon
  • menu
  • message-box
  • small-caption
  • status-bar
  • "string"

Schriftart-Kurzschreibungs-Tücken

Die font-Eigenschaft ist nicht so geradlinig wie andere Kurzschreibweisen, teils wegen der Syntaxanforderungen und teils wegen Vererbungsproblemen.

Hier ist eine Zusammenfassung einiger Dinge, die Sie wissen sollten, wenn Sie diese Kurzschreibweise verwenden.

Obligatorische Werte

Zwei der Werte in der font-Kurzschreibweise sind obligatorisch: font-size und font-family. Wenn einer davon nicht enthalten ist, wird die gesamte Deklaration ignoriert.

Außerdem muss font-family als letzter aller Werte deklariert werden, andernfalls wird die gesamte Deklaration ebenfalls ignoriert.

Optionale Werte

Alle fünf anderen Werte sind optional. Wenn Sie font-style, font-variant und font-weight einbeziehen, müssen diese vor font-size in der Deklaration stehen. Wenn nicht, werden sie ignoriert und können auch dazu führen, dass die obligatorischen Werte ignoriert werden.

body {
    font: italic small-caps bold 44px Georgia, sans-serif;
}

Im obigen Beispiel sind drei optionale Werte enthalten. Solange diese vor font-size definiert sind, können sie in beliebiger Reihenfolge platziert werden.

Die Einbeziehung von line-height ist ebenfalls optional, kann aber nur nach font-size und nur nach einem Schrägstrich angegeben werden.

body {
    font: 44px/20px Georgia, sans-serif;
}

Im obigen Beispiel ist die line-height „20px“. Wenn Sie line-height weglassen, müssen Sie auch den Schrägstrich weglassen, andernfalls wird die gesamte Zeile ignoriert.

Verwendung von font-stretch

Die Eigenschaft font-stretch ist neu in CSS3. Wenn sie in einem älteren Browser verwendet wird, der font-stretch in der font-Kurzschreibweise nicht unterstützt, wird die gesamte Zeile ignoriert.

Der Standard empfiehlt die Einbeziehung eines Fallbacks ohne font-stretch, wie hier

body {
    font: italic small-caps bold 44px Georgia, sans-serif; /* fallback for older browsers */
    font: ultra-condensed italic small-caps bold 44px Georgia, sans-serif;
}

Vererbung für optionale Werte

Wenn Sie optionale Werte (einschließlich line-height) weglassen, erben die weggelassenen optionalen Werte keine Werte von ihrem Elternelement, wie es bei typografischen Eigenschaften oft der Fall ist. Stattdessen werden sie auf ihren Anfangszustand zurückgesetzt.

Zum Beispiel:

body {
    font: italic small-caps bold 44px/50px Georgia, sans-serif;
}

p {
    font: 30px Georgia, sans-serif;
}

In diesem Fall werden die optionalen Werte (kursiv, kleine Majuskeln und fett) auf die font-Deklaration des -Elements angewendet. Diese gelten auch für die meisten Kindelemente.

Da wir jedoch die font-Eigenschaft auf den Absatzelementen neu deklariert haben, werden alle optionalen Werte auf den Absätzen zurückgesetzt, wodurch Stil, Variante, Gewicht und Zeilenhöhe auf ihre Anfangswerte zurückfallen.

Schlüsselwörter zur Definition von Systemschriftarten

Zusätzlich zur oben genannten Syntax erlaubt die font-Eigenschaft auch die Verwendung von Schlüsselwörtern als Werte. Diese sind

• caption
• icon
• menu
• message-box
• small-caption
• status-bar

Diese Schlüsselwortwerte setzen die Schriftart auf diejenige, die auf dem Betriebssystem des Benutzers für die jeweilige Kategorie verwendet wird. Zum Beispiel setzt die Definition von „caption“ die Schriftart auf diesem Element auf die gleiche Schriftart, die auf dem Betriebssystem für Beschriftungssteuerelemente (Schaltflächen, Dropdowns usw.) verwendet wird.

Ein einzelnes Schlüsselwort bildet den gesamten Wert.

body {
    font: menu;
}

Die zuvor erwähnten anderen Eigenschaften sind in Verbindung mit diesen Schlüsselwörtern nicht gültig. Diese Schlüsselwörter können nur mit der font-Kurzschreibweise verwendet werden und können nicht mit einer der einzelnen Langschreibweise-Eigenschaften deklariert werden.

Verwandte Eigenschaften

• font-stretch
• font-variant
• font-style
• font-weight
• line-height
• font-size
• font-family
• Betriebssystemspezifische Schriftarten in CSS

Weitere Informationen

• W3C Spezifikation
• CSS-Tricks Artikel: px – em – % – pt – Schlüsselwort
• Jonathan Snook: Schriftgröße mit rem
• Eine Einführung in die CSS-Kurzschreibweise für Schriftarten
• CSS Schriftart Kurzschreibweise Cheat Sheet

Browser-Unterstützung

Chrome	Safari	Firefox	Opera	IE	Android	iOS
Alle	Alle	Alle	Alle	Alle	Alle	Alle