Zum Textbeginn springen Zur Navigation springen

CSS 2.1 ::Referenz ::Eigenschaften

CSS 2.1: `font-family`

Erläuterungen

Die Eigenschaft font-family ist ein Teil der Kurzschrift- Eigenschaft font. Ihr Wert enthält eine Liste mit generischen oder spezifischen Schriftartbezeichnungen. Im Unterschied zu den meisten anderen Eigenschaften sind die Werte hier durch Kommata voneinander getrennt.

Tipp:

Es ist vorteilhaft, anstelle der einzelnen Eigenschaften wann immer möglich die entsprechenden Kurzschrift- Eigenschaften zu verwenden. Dadurch werden die notierten Regeln übersichtlicher und kompakter. Man sollte dabei aber im Hinterkopf behalten, dass alle nicht deklarierten einzelnen Eigenschaften auf ihre Ausgangswerte zurückgesetzt werden.

Die Reihenfolge bestimmt, mit welcher Priorität die einzelnen Werte abgearbeitet werden. Zunächst sucht das Anwenderprogramm den zuerst aufgeführten Font zu nutzen (siehe Beispiel unten). Ist dieser nicht im System vorhanden, greift es auf den zweiten genannten Font zurück usw. Ist keine der angegebenen Schriftarten im System vorhanden, verwendet der Browser die voreingestellte Schriftart. Dieses Verfahren wird für jedes einzelne Zeichen angewandt. Daher kann es passieren, dass Einzel- und Sonderzeichen, die im Font erster Wahl nicht vorhanden sind, im Font zweiter Wahl dargestellt werden.

Technisch gesehen ist es nicht wichtig, ob alle hier notierten spezifischen Schriftarten derselben generischen Schriftart angehören. Man kann durchaus Grotesk- und Antiqua- Schriftarten in einer Regel mischen. Dennoch ist es sicherlich nicht im Sinne eines einheitlichen Layoutkonzeptes, das Aussehen einer Seite derartig dem Zufall zu überlassen. Auch sollte am Ende der Liste eine generische Schriftart notiert sein, da anderenfalls ein Anwenderprogramm auf eine beliebige vom Benutzer definierte Schriftart zurückgreifen würde.

Erlaubte Werte

Auszug aus der Spezifikation (die verwendete Syntax wird im Artikel CSS-Wertesyntax genauer erläutert):

'font-family' [ [ <family-name> | generic-family ] [, <family-name> | <generic-family>]* ] | inherit

<family-name>

Hier wird einfach der Name einer Fontfamilie notiert, z. B. Arial, nicht die Namen einzelner Fonts wie Arial Black, Arial Bold oder Arial Italic. Welchen dieser einzelnen Fonts der Browser verwendet, entscheidet sich nach den anderen deklarierten font-Eigenschaften. Einige Dinge müssen dennoch beachtet werden:

Fontbezeichnungen, die aus mehreren Worten bestehen, schließt man in Anführungszeichen ein, bei Inline-Styles verwendet man Hochkommata: "Andale Mono" bzw. 'Andale Mono'.
Es ist wichtig, die korrekte Fontbezeichnung anzugeben, z. B. bedeutet "Trebuchet" nicht das gleiche wie "Trebuchet MS".
Genaugenommen kommt es bei Fontnamen auch auf Groß- oder Kleinschreibung an. So sollte kein Browser den Font Times New Roman verwenden, wenn im Stylesheet times new roman deklariert wurde. In der Praxis hängt dies aber auch davon ab, ob der Unterschied für das Betriebssystem eine Rolle spielt.
Eine Fontfamilie muss nicht unbedingt in allen Betriebssystemen denselben Namen haben, z.B. heißt die Schrift Courier des Mac in Windowssystemen oft Courier New.

<generic-family>

Eine der fünf generischen Fontbezeichnungen:

Beispiele für
Schriftfamilien:
v. o. n. u.: serif, sans-serif, cursive, monospace, fantasy

serif: Das Anwenderprogramm greift auf seine voreingestellte Antiquaschriftart (mit Serifen/Füßchen) zurück.
sans-serif: Das Anwenderprogramm greift auf seine voreingestellte Grotesqueschriftart (ohne Serifen/Füßchen) zurück.
cursive: Das Anwenderprogramm greift auf seine voreingestellte Kunstschrift- oder kalligrafische Schriftart zurück.
monospace: Das Anwenderprogramm greift auf eine Schriftart zurück, die alle Zeichen wie bei der Schreibmaschine in der gleichen Breite darstellt.
fantasy: Das Anwenderprogramm greift auf eine Schriftart zurück, die keiner der anderen vier Gruppen zugeordnet werden kann. Hierzu gehören auch Fonts wie Wingdings oder Webdings. Diese Schriftartfamilie sollte nur sehr vorsichtig angewendet werden, da sich durch die großen Unterschiede zwischen den einzelnen Fonts deutliche Unterschiede in der Darstellung eines Webdokuments ergeben können.

inherit

Bestimmt explizit, dass diese Eigenschaft denselben berechneten Wert wie im Elternelement annimmt.

Code-Beispiel:

Dieses erste Beispiel zeigt die Verwendung der Eigenschaft innerhalb eines Stylesheets.

font-family: Georgia, "Times New Roman", serif; font-family: 'Monospace 821', 'Andale Mono', monospace;

Im folgenden Beispiel wird die Schriftart durch Inline-Styles innerhalb des Start-Tags angebracht. Da die Inline-Styles selbst durch Anführungszeichen delimitiert werden, müssen Schriftartfamilien ggf. in Hochkommata eingefasst werden. Man kann diese Anordnung auch vertauschen. Beide Beispiele haben dieselbe Bedeutung.

Browserunterstützung

Die Eigenschaft font-family wird von allen modernen Browsern unterstützt, mit folgender Einschränkung:

IE/win 5.x, IE/Win 6, IE 7: IE/Win erkennt den Wert inherit nicht.

Eric Meyer's CSS2 Test Suite zeigt am praktischen Beispiel, wie die Browser mit dieser Eigenschaft umgehen.

Keine Eigenschaft und kein Selektor stehen in einem Stylesheet für sich allein. In der Praxis kann das Zusammenspiel zwischen verschiedenen Elementen und Selektoren einen nicht zu unterschätzenden Einfluss auf die Fähigkeiten der Browser haben. Bugs treten oft erst durch das Zusammenwirken mehrerer Eigenschaften an unterschiedlichen Elementen auf.

Wechselwirkungen:

font, font-style, font-variant, font-weight, font-size, line-height

Besonderheiten im Medientyp `handheld`:

Diese Eigenschaft ist Teil des Standards CSS Mobile Profile 1.0 und unterliegt damit auch in Mobilgeräten allen relevanten Regeln aus CSS 2.1.

Es gibt praktisch keine Schriftarten und Schriftfamilien für Mobilgeräte. Fast jedes Gerät verwendet einen einzigen proprietären Font für alles. Ausnahmen sind hier nur Pocket PC und Palm. Deshalb können wir guten Gewissens auf alle derartigen Deklarationen verzichten.

Weitere Charakteristika:

Die Stylesheet-Schnellreferenz mit einer Zusammenfassung aller visuellen Eigenschaften kann auch als PDF-Datei herunter geladen werden.

Ausgangs- wert:	Berechneter Wert:	Vererbung:	Anwendbar- keit:	%-Bezugs- wert:	Medien- gruppe(n):
Abhängig vom Anwenderprogramm.	Spezifizierter Wert	Ja	Auf alle Elemente	Nicht zutreffend	Visual

Verwendete Standards

Dieser CSS-Referenz liegen folgende Spezifikationen zugrunde: CSS 1, CSS 2.1 CR und CSS Mobile.

TOP

Notizen: