font-family
Baseline Widely available *
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
* Some parts of this feature may have varying levels of support.
Die font-family
CSS Eigenschaft legt eine priorisierte Liste von einem oder mehreren Schriftfamiliennamen und/oder generischen Familiennamen für das ausgewählte Element fest.
Probieren Sie es aus
Werte sind durch Kommas getrennt, um anzuzeigen, dass sie Alternativen sind. Der Browser wählt die erste Schriftart in der Liste, die installiert ist oder die durch eine @font-face
Regel heruntergeladen werden kann.
Es ist oft praktisch, die Kurzschreibweise font
zu verwenden, um font-size
und andere schriftbezogene Eigenschaften auf einmal festzulegen.
Sie sollten immer mindestens einen generischen Familiennamen in einer font-family
Liste einschließen, da es keine Garantie gibt, dass eine bestimmte Schriftart verfügbar ist. Dies ermöglicht es dem Browser, bei Bedarf eine akzeptable Ersatzschriftart auszuwählen.
Die font-family
Eigenschaft gibt eine Liste von Schriftarten an, von höchster zu niedrigster Priorität. Die Schriftauswahl stoppt nicht bei der ersten Schriftart in der Liste, die auf dem System des Benutzers vorhanden ist. Vielmehr erfolgt die Schriftauswahl ein Zeichen nach dem anderen, sodass, wenn eine verfügbare Schriftart kein Glyphe für ein benötigtes Zeichen hat, die nachfolgenden Schriftarten ausprobiert werden. Wenn eine Schriftart nur in einigen Stilen, Varianten oder Größen verfügbar ist, können diese Eigenschaften auch beeinflussen, welche Schriftfamilie gewählt wird.
Syntax
/* A font family name and a generic family name */
font-family: "Gill Sans Extrabold", sans-serif;
font-family: "Goudy Bookletter 1911", sans-serif;
/* A generic family name only */
font-family: serif;
font-family: sans-serif;
font-family: monospace;
font-family: cursive;
font-family: fantasy;
font-family: system-ui;
font-family: ui-serif;
font-family: ui-sans-serif;
font-family: ui-monospace;
font-family: ui-rounded;
font-family: emoji;
font-family: math;
font-family: fangsong;
/* Global values */
font-family: inherit;
font-family: initial;
font-family: revert;
font-family: revert-layer;
font-family: unset;
Die font-family
Eigenschaft listet eine oder mehrere Schriftfamilien auf, getrennt durch Kommas. Jede Schriftfamilie wird entweder als <family-name>
oder <generic-name>
Wert angegeben.
Das folgende Beispiel listet zwei Schriftfamilien auf, die erste mit einem <family-name>
und die zweite mit einem <generic-name>
:
font-family: "Gill Sans Extrabold", sans-serif;
Werte
<family-name>
-
Der Name einer Schriftfamilie. Dieser muss entweder ein einzelner
<string>
Wert oder eine durch Leerzeichen getrennte Folge von<custom-ident>
Werten sein. Zeichenfolgenwerte müssen in Anführungszeichen stehen, dürfen jedoch jedes Unicode-Zeichen enthalten. Benutzerdefinierte Identifikatoren werden nicht in Anführungszeichen gesetzt, aber bestimmte Zeichen müssen entkommen werden.Es ist eine gute Praxis, Schriftfamiliennamen, die Leerzeichen, Ziffern oder Satzzeichen außer Bindestrichen enthalten, in Anführungszeichen zu setzen.
Siehe auch Gültige Familiennamen.
<generic-name>
-
Generische Schriftfamilien sind ein Rückfallmechanismus, ein Mittel, um einen Teil der Absicht des Stylesheet-Autors zu bewahren, wenn keine der angegebenen Schriftarten verfügbar ist. Generische Familiennamen sind Schlüsselwörter und dürfen nicht in Anführungszeichen gesetzt werden. Eine generische Schriftfamilie sollte das letzte Element in der Liste der Schriftfamiliennamen sein. Die folgenden Schlüsselwörter sind definiert:
serif
-
Glyphen haben abschließende Striche, gebogene oder sich verjüngende Enden oder haben tatsächliche serifenartige Endungen.
Zum Beispiel: Lucida Bright, Lucida Fax, Palatino, Palatino Linotype, Palladio, URW Palladio, serif.
sans-serif
-
Glyphen haben Strichenden, die schlicht sind.
Zum Beispiel: Open Sans, Fira Sans, Lucida Sans, Lucida Sans Unicode, Trebuchet MS, Liberation Sans, Nimbus Sans L, sans-serif.
monospace
-
Alle Glyphen haben die gleiche feste Breite.
Zum Beispiel: Fira Mono, DejaVu Sans Mono, Menlo, Consolas, Liberation Mono, Monaco, Lucida Console, monospace.
cursive
-
Glyphen in kursiven Schriften haben normalerweise entweder verbindende Striche oder andere kursivartige Merkmale über die von Schrägschrift-Typen hinaus. Die Glyphen sind teilweise oder vollständig verbunden, und das Ergebnis sieht mehr nach handgeschriebenem Stift- oder Pinseltext als nach gedrucktem Buchstabenwerk aus.
Zum Beispiel: Brush Script MT, Brush Script Std, Lucida Calligraphy, Lucida Handwriting, Apple Chancery, cursive.
fantasy
-
Fantasy-Schriften sind hauptsächlich dekorative Schriften, die spielerische Darstellungen von Zeichen enthalten.
Zum Beispiel: Papyrus, Herculanum, Party LET, Curlz MT, Harrington, fantasy.
system-ui
-
Glyphen stammen von der Standardschriftart für Benutzeroberflächen auf einer bestimmten Plattform. Da sich typografische Traditionen weltweit stark unterscheiden, wird dieses generische für Schriften bereitgestellt, die sich nicht eindeutig in die anderen Generika einordnen lassen.
ui-serif
-
Die Standardschriftart der Benutzeroberfläche für Serifen.
ui-sans-serif
-
Die Standardschriftart der Benutzeroberfläche für serifenlose Schriftarten.
ui-monospace
-
Die Standardschriftart der Benutzeroberfläche für Monospace.
ui-rounded
-
Die Standardschriftart der Benutzeroberfläche mit abgerundeten Merkmalen.
math
-
Dies ist für die besonderen stilistischen Anforderungen der Darstellung von Mathematik: Hoch- und Tiefstellungen, Klammern, die mehrere Zeilen umfassen, verschachtelte Ausdrücke und doppel-strichige Glyphe mit unterschiedlichen Bedeutungen.
emoji
-
Schriften, die speziell für die Darstellung von Emoji entworfen wurden.
fangsong
-
Ein bestimmter Stil chinesischer Zeichen, der zwischen serifenartigem Song- und kursivem Kai-Stil liegt. Dieser Stil wird häufig für Regierungsdokumente verwendet.
Formale Definition
Anfangswert | hängt vom User Agent ab |
---|---|
Anwendbar auf | all elements and text. Auch anwendbar auf ::first-letter und ::first-line . |
Vererbt | Ja |
Berechneter Wert | wie angegeben |
Animationstyp | diskret |
Formale Syntax
font-family =
[ <family-name> | <generic-family> ]#
<family-name> =
<string> |
<custom-ident>+
<generic-family> =
<generic-script-specific> |
<generic-complete> |
<generic-incomplete>
<generic-script-specific> =
generic( fangsong ) |
generic( kai ) |
generic( khmer-mul ) |
generic( nastaliq )
<generic-complete> =
serif |
sans-serif |
system-ui |
cursive |
fantasy |
math |
monospace
<generic-incomplete> =
ui-serif |
ui-sans-serif |
ui-monospace |
ui-rounded
Beispiele
Einige häufige Schriftfamilien
.serif {
font-family: Times, "Times New Roman", Georgia, serif;
}
.sansserif {
font-family: Verdana, Arial, Helvetica, sans-serif;
}
.monospace {
font-family: "Lucida Console", Courier, monospace;
}
.cursive {
font-family: cursive;
}
.fantasy {
font-family: fantasy;
}
.emoji {
font-family: emoji;
}
.math {
font-family: math;
}
.fangsong {
font-family: fangsong;
}
Gültige Familiennamen
Die folgenden Deklarationen sind gültig:
font-family: "Goudy Bookletter 1911", sans-serif;
Die folgenden Deklarationen sind ungültig:
font-family: Goudy Bookletter 1911, sans-serif;
font-family: Red/Black, sans-serif;
font-family: "Lucida" Grande, sans-serif;
font-family: Ahem!, sans-serif;
font-family: test@foo, sans-serif;
font-family: #POUND, sans-serif;
font-family: Hawaii 5-0, sans-serif;
Das folgende Beispiel ist technisch gültig, wird jedoch nicht empfohlen:
font-family:
Gill Sans Extrabold,
sans-serif;
Spezifikationen
Specification |
---|
CSS Fonts Module Level 4 # generic-font-families |
CSS Fonts Module Level 4 # font-family-prop |
Browser-Kompatibilität
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
font-family | ||||||||||||
math | ||||||||||||
system-ui | ||||||||||||
ui-monospace | ||||||||||||
ui-rounded | ||||||||||||
ui-sans-serif | ||||||||||||
ui-serif |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- No support
- No support
- Experimental. Expect behavior to change in the future.
- See implementation notes.
- Uses a non-standard name.
- Has more compatibility info.