0Pricing
CSS Academy · Lektion

Schriftfamilien und websichere Schriften

Legen Sie Schriftfamilien fest und verstehen Sie, welche Schriften browserübergreifend sicher verwendet werden können.

Schriftfamilien und websichere Schriften ist eine kostenlose CSS Academy-Lektion auf CoddyKit. Dies ist Lektion 1 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des CSS Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der CSS Academy-Kurs umfasst insgesamt 4 Lektionen.

Die Eigenschaft font-family

Die Eigenschaft font-family legt die Schriftart für ein Element fest. Sie geben eine Schriftartenliste an: eine durch Kommas getrennte Liste von Schriftartnamen, geordnet von der bevorzugten bis zur am wenigsten bevorzugten Schriftart und abgeschlossen durch eine generische Schriftfamilie.

<p>This text renders in the page's body font stack.</p>

Generische Schriftfamilien

CSS definiert fünf generische Familien als Fallbacks:

  • serif — Schriften mit dekorativen Serifen (Times, Georgia)
  • sans-serif — klare Schriften ohne Serifen (Arial, Helvetica)
  • monospace — Schriftarten mit fester Zeichenbreite (Courier, Consolas)
  • cursive — Schreibschriftarten
  • fantasy — dekorative Display-Schriften

Websichere Schriftarten

Websichere Schriftarten sind auf praktisch allen Betriebssystemen vorinstalliert. Sie können sich auf sie verlassen, ohne eine externe Schriftartdatei zu laden:

  • Sans-Serif: Arial, Helvetica, Verdana, Trebuchet MS
  • Serif: Georgia, Times New Roman
  • Monospace: Courier New, Consolas

Schriftartnamen mit Leerzeichen

Schriftartnamen mit Leerzeichen müssen in Anführungszeichen eingeschlossen werden:

<p class="serif-example">"Times New Roman", Times, serif</p>
<p class="sans-example">"Open Sans", sans-serif</p>

Bewährte Vorgehensweise für Schriftartenlisten

Stellen Sie Ihre Schriftartenliste wie folgt zusammen:

  1. Ihre bevorzugte Schriftart (ist möglicherweise nicht installiert)
  2. Eine oder zwei ähnliche Fallback-Schriftarten
  3. Eine generische Familie als letzte Möglichkeit
<p class="font-stack">Georgia &rarr; Palatino Linotype &rarr; serif fallback</p>

System-UI-Schriftarten

Moderne Designs verwenden häufig Systemschriftarten — die native UI-Schriftart des Betriebssystems. Das wirkt systemeigen und erfordert keinen Download:

<p class="system-ui-text">This uses your OS's native UI font.</p>

Monospace-Listen für Code

Code-Editoren und Terminals benötigen eine Monospace-Schriftartenliste:

<p>Inline <code>const x = 1;</code> code.</p>
<pre>function hello() {
  return "world";
}</pre>

font-family erben

Die meisten Elemente erben font-family von ihrem übergeordneten Element. Einige Formularelemente (<input>, <textarea>) erben die Eigenschaft in manchen Browsern standardmäßig nicht — legen Sie sie daher ausdrücklich fest:

<input type="text" placeholder="Input" />
<textarea placeholder="Textarea"></textarea>
<select><option>Select</option></select>
<button>Button</button>

Verfügbare Schriftarten prüfen

Mit der Funktion local() innerhalb von @font-face können Sie prüfen, ob eine Systemschriftart verfügbar ist. Browser versuchen zuerst, eine lokale Schriftart zu verwenden, bevor sie eine Schriftart herunterladen.

<p class="my-font-text">Text using MyFont (local match or fallback)</p>

Unicode-Range-Subsetting

Verwenden Sie beim Laden von Schriftarten unicode-range in @font-face, um nur die benötigten Zeichenbereiche zu laden und so die Downloadgröße mehrsprachiger Websites zu reduzieren.

<p class="inter-text">Basic Latin text (U+0000&ndash;00FF range)</p>

Überblick über variable Schriftarten

Variable Schriftarten enthalten eine gesamte Familie (Schriftschnitte, -breiten und -stile) in einer einzigen Datei und verwenden dafür Schriftvariationsachsen. Dadurch reduzieren sie bei typografisch aufwendigen Designs die Anzahl der HTTP-Anfragen erheblich.

Schnelltest

Welche generische Schriftfamilie sollten Sie als letzten Fallback für eine Sans-Serif-Schriftartenliste verwenden?

Zusammenfassung

Die Eigenschaft font-family verwendet eine Schriftartenliste, die mit einer generischen Familie endet. Websichere Schriftarten funktionieren überall, ohne dass sie geladen werden müssen. System-UI-Schriftarten vermitteln ein natives Erscheinungsbild ohne zusätzliche HTTP-Kosten. Setzen Sie Schriftartnamen mit Leerzeichen immer in Anführungszeichen.

Häufig gestellte Fragen

Ist die Lektion „Schriftfamilien und websichere Schriften“ kostenlos?

Ja — der vollständige Text von „Schriftfamilien und websichere Schriften“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des CSS Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der CSS Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Schriftfamilien und websichere Schriften“?

Legen Sie Schriftfamilien fest und verstehen Sie, welche Schriften browserübergreifend sicher verwendet werden können. Du übst CSS Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um CSS Academy zu starten?

Keine Vorkenntnisse erforderlich. CSS Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 1 von 4.

Wie lange dauert die Lektion „Schriftfamilien und websichere Schriften“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser CSS Academy-Lektion Code schreiben und ausführen?

Ja. Jede CSS Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

  1. Schriftfamilien und websichere Schriften
  2. Schriftgröße, -stärke und -stil
  3. Textausrichtung, -dekoration und -abstände
  4. Google Fonts und @font-face
← Zurück zu CSS Academy