CSS Grundlagen: Die Basics von Schriftarten verstehen und anwenden - Ein Leitfaden für Einsteiger

English

CSS Property font-family – Schriftarten definieren

Das zentrale Merkmal einer Webseite ist das Schriftbild. Mit der CSS-Eigenschaft font-family wird die bevorzugte Schriftart bzw. eine Liste alternativer Schriftarten festgelegt.

CSS-Eigenschaft: Font-Family

Beschreibung mögliche Werte Standardwert Kategorie
Schriftart Liste von Schriftarten

generische Schriftarten
serif
sans-serif
cursive
monospaced
fantasy
initial
inherit
abhängig von der Implementierung Schriften
Fonts

Die Angabe in oranger Schrift ist die Standardanwendung der CSS-Eigenschaft font-family.

Beachte:
  1. Es können mehrere durch Komma getrennte Schriftarten angegeben werden. Für die Darstellung der Webseite wird die erste Schriftart aus der Liste von Schriftarten verwendet, die auf dem System des Benutzers installiert ist.

  2. Schriftarten mit Leerzeichen im Namen der Schriftart müssen in einfache oder doppelte Anführungszeichen (Englisch: Quotes) gesetzt werden.

  3. Die Angabe der Schriftart ist nicht case-sensitiv, d.h. Kleinschreibung oder Großschreibung spielt keine Rolle.

  4. Ohne ladbare Web-Fonts können nur die Schriften vom Browser angezeigt werden, die auf dem System des Nutzers installiert sind.

    Zusätzlich zu konkreten Schriftarten sollten deshalb immer generische Schriftarten festgelegt werden. Die wichtigsten Keywords für generische Schriftarten sind:

    • serif für eine Schrift mit Serifen, z.B. Times New Roman.

    • sans-serif für eine Schrift ohne Serifen, z.B. Arial oder Verdana.

    • monospace für eine Schrift mit gleicher Buchstabenbreite für alle Buchstaben.

  5. initial erzwingt die Wiederherstellung der ursprünglichen Schriftart, d.h. der Wert initial stellt für die Eigenschaft font-family die Standardschrift ein.

  6. inherit erzwingt die Vererbung der Schriftart vom Eltern-Element.

Beispiel
body {
  font-family: "Open Sans", "Liberation Sans", Verdana, Arial, Helvetica, sans-serif;
}