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 spezifiziert eine priorisierte Liste von einem oder mehreren Schriftfamiliennamen und/oder generischen Familiennamen für das ausgewählte Element.
Probieren Sie es aus
font-family: Georgia, serif;
font-family: "Gill Sans", sans-serif;
font-family: sans-serif;
font-family: serif;
font-family: cursive;
font-family: system-ui;
<section id="default-example">
<p id="example-element">
London. Michaelmas term lately over, and the Lord Chancellor sitting in
Lincoln's Inn Hall. Implacable November weather. As much mud in the streets
as if the waters had but newly retired from the face of the earth, and it
would not be wonderful to meet a Megalosaurus, forty feet long or so,
waddling like an elephantine lizard up Holborn Hill.
</p>
</section>
section {
font-size: 1.2em;
}
Werte werden durch Kommas getrennt, um Alternativen anzugeben. Der Browser wählt die erste Schriftart in der Liste, die installiert ist oder über eine @font-face at-rule heruntergeladen werden kann.
Es ist oft praktisch, die Kurzform-Eigenschaft font zu verwenden, um font-size und andere schriftbezogene Eigenschaften auf einmal zu setzen.
Sie sollten immer mindestens einen generischen Familiennamen in eine font-family Liste aufnehmen, da nicht garantiert werden kann, dass eine bestimmte Schriftart verfügbar ist. Dies ermöglicht dem Browser, bei Bedarf eine akzeptable Ersatzschriftart auszuwählen.
Die font-family Eigenschaft spezifiziert eine Liste von Schriftarten, von höchster zu niedrigster Priorität. Die Schriftauswahl endet nicht bei der ersten Schrift in der Liste, die auf dem Benutzer-System vorhanden ist. Vielmehr erfolgt die Schriftauswahl zeichenweise, sodass, wenn eine verfügbare Schriftart kein Glyph für ein benötigtes Zeichen hat, die nachfolgenden Schriftarten ausprobiert werden. Wenn eine Schriftart nur in bestimmten Stilen, Varianten oder Größen verfügbar ist, können diese Eigenschaften ebenfalls 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 als entweder ein <family-name> oder ein <generic-name> Wert angegeben.
Das untenstehende 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. Dies muss entweder ein einzelner
<string>Wert oder eine durch Leerzeichen geteilte Sequenz von<custom-ident>Werten sein. Zeichenfolgenwerte müssen in Anführungszeichen stehen, können aber jedes Unicode-Zeichen enthalten. Benutzerdefinierte Identifikatoren werden nicht in Anführungszeichen gesetzt, aber bestimmte Zeichen müssen maskiert 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 den Stil des Autors des Stylesheets weitgehend zu bewahren, wenn keine der angegebenen Schriften verfügbar sind. 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, aufgeblähte oder verjüngte Enden oder haben tatsächliche serifenförmige Enden.
Zum Beispiel: Lucida Bright, Lucida Fax, Palatino, Palatino Linotype, Palladio, URW Palladio, serif.
sans-serif-
Glyphen haben schlichte Enden.
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 Kursivschriften haben im Allgemeinen entweder verbindende Striche oder andere kursivartige Merkmale, die über die von italic-Schriften hinausgehen. Die Glyphen sind teilweise oder vollständig verbunden, und das Ergebnis sieht eher wie handgeschrieben mit einem Stift oder Pinsel als wie gedruckte Buchstabenarbeit aus.
Zum Beispiel: Brush Script MT, Brush Script Std, Lucida Calligraphy, Lucida Handwriting, Apple Chancery, cursive.
fantasy-
Fantasieschriften sind vorwiegend dekorative Schriften, die spielerische Darstellungen von Zeichen enthalten.
Zum Beispiel: Papyrus, Herculanum, Party LET, Curlz MT, Harrington, fantasy.
system-ui-
Glyphen werden aus der Standardbenutzeroberfläche Schrift eines bestimmten Plattform entnommen. Da die typografischen Traditionen weltweit stark variieren, wird diese generische Option für Schriften bereitgestellt, die nicht sauber in die anderen generischen Optionen passen.
ui-serif-
Die Standardbenutzeroberfläche Serifenschrift.
ui-sans-serif-
Die Standardbenutzeroberfläche Sans-Serifenschrift.
ui-monospace-
Die Standardbenutzeroberfläche Monospace-Schrift.
ui-rounded-
Die Standardbenutzeroberfläche Schrift, die abgerundete Merkmale aufweist.
math-
Dies ist für die speziellen stilistischen Anforderungen bei der Darstellung von Mathematik: Hoch- und Tiefstellungen, Klammern, die mehrere Zeilen umfassen, verschachtelte Ausdrücke und doppelt geschlagene Glyphen mit unterschiedlichen Bedeutungen.
emoji-
Schriften, die speziell für die Darstellung von Emoji entwickelt wurden.
fangsong-
Ein bestimmter Stil von chinesischen Zeichen, der zwischen serif-artigen Song und kursiv-artigen Kai-Formen liegt. Dieser Stil wird oft 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 |