font-family

Übersicht

Die font-family CSS Eigenschaft erlaubt es, eine priorisierte Liste von Schriftfamiliennamen und/oder generische Familiennamen für ein ausgewähltes Element anzugeben. Im Gegensatz zu den meisten anderen CSS Eigenschaften werden die Werte durch Komma getrennt, um zu kennzeichnen, dass sie Alternativen darstellen. Der Browser wählt die erste Schrift, die auf dem Computer installiert ist oder mittels der Informationen, die über eine @font-face At-Regel gegeben sind, heruntergeladen werden kann.

Webautoren sollten einer Schriftfamilienliste immer mindestens eine generische Familie hinzufügen, da es keine Garantie dafür gibt, dass eine bestimmte Schriftart auf dem Computer installiert ist oder über die @font-face At-Regel heruntergeladen werden kann. Die generische Schriftart erlaubt es dem Browser, falls nötig, eine akzeptable Ersatzschriftart auszuwählen.

Es ist oft vorteilhaft, die Kurzform Eigenschaft font zu verwenden, um font-size und andere Schrift bezogene Eigenschaften auf einmal zu setzen.

Syntax

Formale Syntax: [ <family-name> | <generic-family> ]#
wobei 
<family-name> = <string> | <IDENT>+
<generic-family> = serif | sans-serif | cursive | fantasy | monospace
 

font-family: Gill Sans Extrabold, sans-serif
font-family: "Goudy Bookletter 1911", sans-serif

font-family: serif
font-family: sans-serif
font-family: monospace
font-family: cursive
font-family: fantasy

font-family: inherit

Werte

Gültige Schriftfamiliennamen

Schriftfamiliennamen müssen entweder in Anführungszeichen eingeschlossene Strings sein oder nicht angeführte als eine Aneinanderreihung von einem oder mehreren Bezeichnern. Das heißt dass in nicht angeführten Schriftfamiliennamen Interpunktionszeichen und Ziffern am Anfang jedes Zeichens Maskiert (escaped) werden müssen.

Beispielsweise sind die folgenden Angaben gültig:

font-family: Gill Sans Extrabold, sans-serif;
font-family: "Goudy Bookletter 1911", sans-serif;

Die folgenden Angaben 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;

Beispiele

Beispiel 1

body     { font-family: "Gill Sans Extrabold", Helvetica, sans-serif }

.receipt { font-family: Courier, "Lucida Console", monospace }

Beispiel 2

.exampleserif {
    font-family: Times, "Times New Roman", Georgia, serif;
}

.examplesansserif {
    font-family: Verdana, Arial, Helvetica, sans-serif;
}

.examplemonospace {
    font-family: "Lucida Console", Courier, monospace;
}

.examplecursive {
    font-family: cursive;
}

.examplefantasy {
    font-family: fantasy;
}

<div class="exampleserif">
Dies ist ein Beispiel für eine Serifenschrift.
</div>

<div class="examplesansserif">
Dies ist ein Beispiel für eine serifenlose Schrift.
</div>

<div class="examplemonospace">
Dies ist ein Beispiel für eine nicht-proportionale Schrift.
</div>

<div class="examplecursive">
Dies ist ein Beispiel für eine kursive Schrift.
</div>

<div class="examplefantasy">
Dies ist ein Beispiel für eine Fantasieschrift.
</div>

Live Beispiel

Spezifikation

Browser Kompatibilität