CSS font-family-Eigenschaft
Die CSS-Eigenschaft font-family legt Schriftfamilien für ein Element fest. Erklärung und Beispiele.
Die CSS-Eigenschaft font-family legt fest, welche Schriftart zur Darstellung von Text verwendet wird. Sie übergeben ihr eine priorisierte Liste von Schriftarten, und der Browser durchläuft diese Liste von links nach rechts und verwendet die erste, die er auf dem Gerät des Nutzers findet.
Diese Seite erklärt, wie der Font-Stack funktioniert, den Unterschied zwischen spezifischen und generischen Familien, wie man eine zuverlässige Fallback-Liste aufbaut und welche Fallstricke es bei Anführungszeichen und zeichenweisem Matching gibt.
So funktioniert der Font-Stack
Die Werte werden durch Kommas getrennt, und der Browser behandelt sie als Alternativen — nicht als kombinierte Schriftart. Er verwendet die erste verfügbare Schriftart in der Liste und hält dann an:
font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;Hier versucht der Browser zuerst "Segoe UI". Wenn diese nicht installiert ist, versucht er Roboto, dann Helvetica, dann Arial und schließlich das generische sans-serif, das der Browser immer mit einer seiner eingebauten Schriftarten erfüllt. Deshalb sollte ein Font-Stack immer mit einer generischen Familie enden — das garantiert, dass der Text selbst auf Geräten ohne eine Ihrer bevorzugten Schriftarten noch vernünftig dargestellt wird.
Die zwei Arten von Schriftartnamen
Es gibt zwei Typen von Werten, die Sie angeben können, und ein guter Stack kombiniert beide:
family-name— der Name einer bestimmten Schriftart, wie"Times New Roman",CourieroderArial. Diese werden zuerst aufgelistet, weil sie die tatsächlich gewünschten Schriftarten sind.generic-family— ein Kategorie-Schlüsselwort, das der Browser einer geeigneten eingebauten Schriftart zuordnet. Geben Sie eine davon zuletzt als letzten Fallback an. Die standardmäßigen generischen Familien sind:
| Generische Familie | Typisches Aussehen | Beispielschriften |
|---|---|---|
serif | Buchstaben mit kleinen Strichen („Serifen") | Times New Roman, Georgia |
sans-serif | Sauber, ohne Striche — häufig für UI/Fließtext | Arial, Helvetica |
monospace | Jedes Zeichen gleich breit — für Code | Courier New, Consolas |
cursive | Handschrift- / Schreibschriftstil | Brush Script, Comic Sans |
fantasy | Dekorativer Displaystil | Impact, Papyrus |
system-ui | Die native UI-Schriftart des Geräts | San Francisco, Segoe UI |
Schriftartnamen in Anführungszeichen
Wenn ein Schriftartname Leerzeichen enthält (oder mit einem Schlüsselwort verwechselt werden könnte), setzen Sie ihn in Anführungszeichen:
/* Multi-word names need quotes */
font-family: "Courier New", "Lucida Console", monospace;
/* Single-word names don't, but quotes are still valid */
font-family: Georgia, serif;Setzen Sie niemals Anführungszeichen um das generische Familien-Schlüsselwort — "sans-serif" würde als eine Schriftart gelesen, die buchstäblich „sans-serif" heißt, und nicht als generische Kategorie.
Zeichenweises Fallback
Die Schriftauswahl endet nicht beim ersten verfügbaren Font für den gesamten Text — sie geschieht Zeichen für Zeichen. Fehlt der gefundenen Schriftart ein Glyph für ein bestimmtes Zeichen (etwa ein Emoji oder ein nicht-lateinischer Buchstabe), durchsucht der Browser die Liste weiter nach einer Schriftart, die diesen Glyph besitzt. Deshalb hilft eine breite generische Familie am Ende bei gemischsprachigen oder symbolreichen Inhalten.
Um eine benutzerdefinierte Schriftart zu laden und zu verwenden, die nicht auf dem Gerät des Nutzers installiert ist, definieren Sie sie mit der @font-face-Regel und referenzieren Sie dann ihren Namen in font-family.
| Initialwert | serif |
|---|---|
| Gilt für | Alle Elemente. Gilt auch für ::first-letter und ::first-line. |
| Vererbbar | Ja. |
| Animierbar | Nein. |
| Version | CSS1 |
| DOM-Syntax | object.style.fontFamily = "Verdana, sans-serif"; |
Syntax
Syntax der CSS font-family-Eigenschaft
font-family: family-name | generic-family | initial | inherit;Beispiel der font-family-Eigenschaft:
Beispiel der CSS font-family-Eigenschaft mit dem Wert sans-serif
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}
</style>
</head>
<body>
<h2>Font-family property example</h2>
<p>We used "Lucida Grande" font-family for this text.</p>
</body>
</html>Der obige Stack fragt nach "Lucida Sans Unicode", greift auf "Lucida Grande" (das macOS-Äquivalent) zurück und schließlich auf das, was der Browser für sans-serif verwendet — so bleibt der Absatz überall lesbar.
Einen robusten Font-Stack aufbauen
Ein praktischer Stack listet in dieser Reihenfolge: Ihre ideale Schriftart, ein oder zwei weit verbreitete Alternativen mit ähnlichem Aussehen und eine generische Familie als Abschluss. Ein verbreiteter „Systemschrift"-Stack, der die native UI-Schriftart jeder Plattform verwendet, sieht so aus:
body {
font-family: -apple-system, system-ui, "Segoe UI", Roboto,
"Helvetica Neue", Arial, sans-serif;
}Dies wird auf Apple-Geräten als San Francisco, unter Windows als Segoe UI und unter Android als Roboto dargestellt — ganz ohne herunterladbare Webfont.
Werte
| Wert | Beschreibung | Ausprobieren |
|---|---|---|
| family-name, generic-family | Priorisierte Liste von Schriftfamiliennamen und/oder generischen Familiennamen. | Ausprobieren » |
| initial | Setzt die Eigenschaft auf ihren Standardwert. | Ausprobieren » |
| inherit | Erbt die Eigenschaft vom übergeordneten Element. | Ausprobieren » |
Verwandte Eigenschaften
font-family wird üblicherweise zusammen mit den anderen Schrifteigenschaften gesetzt oder alles auf einmal mit der font-Kurzschreibweise:
- font-size — Größe des Textes.
- font-weight — Stärke des Textes.
- font-style — Kursiv oder normal.
- @font-face — Lädt eine benutzerdefinierte Webfont, die hier referenziert werden kann.