Schriftart - CSS-Tricks | CSS-Almanach 2025

Die fontEigenschaft in CSS ist eine Kurzform-Eigenschaft, 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 fontUntereigenschaften, darunter:

font-stretch: Diese Eigenschaft legt die Schriftbreite fest, z. B. komprimiert oder erweitert.
- normal
- ultra-condensed
- extra-condensed
- condensed
- semi-condensed
- semi-expanded
- expanded
- extra-expanded
- ultra-expanded
font-style: Lässt den Text kursiv oder schräg erscheinen.
- normal
- italic
- oblique
- inherit
font-variant: Ändert den Zieltext in Kapitälchen.
- normal
- small-caps
- inherit
font-weight: Legt das Gewicht oder die Dicke der Schrift fest.
- normal
- bold
- bolder
- lighter
- 100, 200, 300, 400, 500, 600, 700, 800, 900
- inherit
font-size: Legt die Höhe der Schriftart fest.
- xx-small
- x-small
- small
- medium
- large
- x-large
- xx-large
- smaller, larger
- percentage
- inherit
line-height: Definiert den Platz über und unter Inline-Elementen.
- normal
- number (font-size multiplier)
- percentage
font-family: Definiert die Schriftart, die auf das Element angewendet wird.
- sans-serif
- serif
- monospace
- cursive
- fantasy
- caption
- icon
- menu
- message-box
- small-caption
- status-bar
- "string"

Font Shorthand Gotchas

Die fontEigenschaft ist nicht so einfach wie andere Kurzform-Eigenschaften, teils aufgrund der Syntaxanforderungen, teils aufgrund von Vererbungsproblemen.

Hier finden Sie eine Zusammenfassung einiger Dinge, die Sie bei der Verwendung dieser Kurzschrift-Eigenschaft wissen sollten.

Obligatorische Werte

Zwei der Werte in fontKurzform sind obligatorisch: font-sizeund font-family. Wenn einer dieser Punkte nicht enthalten ist, wird die gesamte Deklaration ignoriert.

Außerdem font-familymuss der letzte aller Werte deklariert werden, da sonst die gesamte Deklaration ignoriert wird.

Optionale Werte

Alle fünf anderen Werte sind optional. Wenn Sie eines von font-style,, font-variantund font-weightangeben, müssen diese font-sizein der Deklaration vorangestellt werden. Wenn dies nicht der Fall ist, 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 Optionen enthalten. Solange diese vorher definiert sind font-size, können sie in beliebiger Reihenfolge platziert werden.

Das Einschließen line-heightist ebenfalls optional, kann jedoch erst nach font-sizeund nur nach einem Schrägstrich deklariert werden :

body ( font: 44px/20px Georgia, sans-serif; )

Im obigen Beispiel ist das line-height"20px". Wenn Sie weglassen line-height, müssen Sie auch den Schrägstrich weglassen, da sonst die gesamte Zeile ignoriert wird.

Verwenden von Font-Stretch

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

In der Spezifikation wird empfohlen, einen Fallback ohne Folgendes einzuschließen font-stretch:

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 Optionen

Wenn Sie einen der optianalen Werte (einschließlich line-height) weglassen, erben die ausgelassenen Optionen keine Werte von ihrem übergeordneten Element, wie dies häufig bei typografischen Eigenschaften der Fall ist. Stattdessen werden sie auf ihren Ausgangszustand 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, Kapitälchen und Fettdruck) in die fontDeklaration des Elements eingefügt. Diese gelten auch für die meisten untergeordneten Elemente.

Da wir jedoch die fontEigenschaft für die Absatzelemente neu deklariert haben , werden alle Optionen für die Absätze zurückgesetzt, sodass Stil, Variante, Gewicht und Zeilenhöhe auf ihre ursprünglichen Werte zurückgesetzt werden.

Schlüsselwörter zum Definieren von Systemschriftarten

Zusätzlich zur obigen Syntax ermöglicht die fontEigenschaft auch die Verwendung von Schlüsselwörtern als Werte. Sie sind:

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

Diese Schlüsselwortwerte setzen die Schriftart auf die Schriftart, die auf dem Betriebssystem des Benutzers für diese bestimmte Kategorie verwendet wird. Wenn Sie beispielsweise "Beschriftung" definieren, wird die Schriftart für dieses Element so festgelegt, dass dieselbe Schriftart verwendet wird, die auf dem Betriebssystem für Steuerelemente mit Beschriftungen (Schaltflächen, Dropdown-Listen usw.) verwendet wird.

Ein einzelnes Schlüsselwort umfasst den gesamten Wert:

body ( font: menu; )

Die anderen zuvor genannten Eigenschaften sind in Verbindung mit diesen Schlüsselwörtern nicht gültig. Diese Schlüsselwörter können nur mit fontKurzschrift verwendet und nicht mit einer der einzelnen Langhand-Eigenschaften deklariert werden.