CSS Font Family: Die font-family-Eigenschaft in CSS definiert die Schriftart eines Textes auf einer Webseite. Damit wird festgelegt, welche Schriftarten für den Text verwendet werden sollen, basierend auf der Reihenfolge der angegebenen Schriften. Falls die erste Schriftart nicht verfügbar ist, wird die nächste in der Liste verwendet. Dadurch wird eine alternative Darstellung gewährleistet, um Lesbarkeit und Design beizubehalten.
Syntax von font-family
element {
font-family: "Primäre Schriftart", "Alternative Schriftart", generische Schriftfamilie;
}- „Primäre Schriftart“: Die bevorzugte Schriftart. Diese wird zuerst geladen.
- „Alternative Schriftart“: Eine alternative Schriftart für den Fall, dass die primäre Schrift nicht verfügbar ist.
- Generische Schriftfamilie: Eine allgemein verfügbare Schriftartkategorie, wie z. B.
sans-serifoderserif, falls keine andere angegebene Schrift geladen werden kann.
Beispiel
body {
font-family: "Arial", "Helvetica", sans-serif;
}In diesem Beispiel wird die Schriftart Arial zuerst verwendet. Falls Arial nicht verfügbar ist, wird Helvetica verwendet. Wenn auch Helvetica nicht verfügbar ist, wird als letzte Option die generische sans-serif-Schrift geladen.
Generische Schriftfamilien
CSS bietet einige generische Schriftfamilien, die auf allen Systemen verfügbar sind und die grundlegende Stilrichtung angeben:
- serif: Schriftarten mit Serifen, wie Times New Roman.
- sans-serif: Serifenlose Schriftarten, wie Arial.
- monospace: Schriften, bei denen alle Zeichen dieselbe Breite haben, wie Courier New.
- cursive: Handschriftliche Schriften, wie Comic Sans.
- fantasy: Dekorative Schriften, z. B. Impact.
Beispiel für generische Schriftfamilien
p {
font-family: serif;
}
code {
font-family: monospace;
}Auswahl passender Schriften für Webdesign
Um die Lesbarkeit und das Erscheinungsbild einer Webseite zu optimieren, sollte eine gut lesbare primäre Schriftart gewählt werden. Die am häufigsten genutzten, web-sicheren Schriftarten sind Arial, Verdana und Times New Roman. Diese sind auf fast allen Systemen verfügbar.
Beispiel für Websichere Schriftarten
body {
font-family: "Verdana", "Geneva", sans-serif;
}Verwendung von Webfonts
Um eine größere Auswahl an Schriften zu nutzen, können Webfonts wie Google Fonts eingebunden werden. Diese bieten zusätzliche Stilrichtungen und machen Webseiten individueller. Die Einbindung erfolgt meist über einen <link> im HTML-<head> oder mit @import im CSS.
Einbindung über Google Fonts
<!-- HTML -->
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">/* CSS */
body {
font-family: 'Roboto', sans-serif;
}Häufig gestellte Fragen
Wie viele Schriftarten sollte ich auf einer Webseite verwenden?
Für eine klare und einheitliche Darstellung sollten nicht mehr als 2–3 verschiedene Schriftarten verwendet werden. Zu viele verschiedene Schriftarten wirken oft unruhig.
Was passiert, wenn keine der angegebenen Schriftarten verfügbar ist?
Falls keine der angegebenen Schriftarten verfügbar ist, wird die generische Schriftfamilie (z. B. sans-serif) verwendet.