- die Online CSS Referenz
Impressum

Schriftformatierung

font-family | font-style | font-variant | font-weight | font-size | font

font-familyzur Übersicht    eins nach unten

font-family gibt die Schriftart (font), Schriftfamilie oder generische Schriftfamilie an, in der der Text des Elements dargestellt werden soll. Es gibt fünf generische Schriftfamilien: serif (Serifenschrift), sans-serif (Serifenlose Schrift), monospace (Schrift mit konstanter Breite), cursive (Kursivschriften) und fantasy (Schmuckschriften).
Es können mehrere Schriften durch Kommata getrennt angegeben werden. Schriften, die Leerzeichen enthalten, müssen in Anführungsstriche gesetzt werden. Als letzte Angabe sollte eine generische Schriftfamilie notiert werden. Browser können nur die Schriften anzeigen, die auf dem System des Users installiert sind. Im Zweifelsfall wird durch die Eigenschaften der generischen Schriftfamilie die Schrift des System angezeigt, die installiert ist. Die Reihenfolge gibt die Priorität des Formatierungswunsches an.

Werte

[Schriftfamilie(n)], [generische Schriftfamilie(n)]

Standardwert ist die Standardschrift des Browsers

Vererbung

Ja

Beispiel

p{ font-family: Times, "Times New Roman", serif;}

font-family

font-stylezur Übersichteins nach obeneins nach unten

font-style bezeichnet den Darstellungsstil einer Schriftart. Mit italic wird ein vorhandener kursiver Schriftschnitt dargestellt. oblique stellt den normalen Schriftschnitt künstlich schräg. Beim Fehlen eines kursiven Schnitts wird der Text als oblique formatiert. Der font-style kann auch vom Eltern- Element ererbt werden (inherit).

Werte

normal | italic | oblique | inherit

Standardwert ist normal

Vererbung

Ja

Beispiel

p{ font-style: italic;}

font-style

font-variantzur Übersichteins nach obeneins nach unten

font-variant kann mit dem Wert small-caps normale Kleinbuchstaben in Kapitälchen (kleine Großbuchstaben) darstellen. Da aber nur wenige Schriftschnitte über echte Kapitälchen verfügen, skaliert der Browser die normalen Großbuchstaben herunter.

Werte

normal | small-caps | inherit

Standardwert ist normal

Vererbung

Ja

Beispiel

p{ font-variant: small-caps;}

font-variant

font-weightzur Übersichteins nach obeneins nach unten

font-weight stellt ein, wie fett der Text dargestellt werden soll.

Werte

normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900

bolder formatiert das Element eine Stufe fetter als das Eltern-Element

lighter formatiert das Element entsprechend feiner als das Eltern-Element

normal entspricht 400

bold entspricht 700

Standardwert ist normal, entspricht 400

Vererbung

Ja

Beispiel

p{ font-weight: nomal;}
p.fetter{ font-weight: bolder;
}

font-weight

font-sizezur Übersichteins nach obeneins nach unten

font-size stellt die Größe des Textes ein. Für die Bildschirmausgabe empfehlen sich relative Angaben, wie em, ex, %, larger und smaller. Für Druckausgaben Werte, wie pt und cm.

Werte

xx-small | x-small | small | medium | large | x-large | xx-large | larger | smaller | [numerische Angabe] | [relative Angabe] | [prozentuale Angabe]

larger und smaller formatiert die Größe der Schrift gemessen an dem Eltern-Element, sind also relativ. Die oben genannten Schlüsselwörter sind bis auf die zwei Ausnahmen absolut. Der numerische Wert px (für Pixel) kann im Internet Explorer nicht mehr verändert werden, im Sinne der Benutzbarkeit daher nicht zu empfehlen.

Standardwert ist medium

Vererbung

Ja

Beispiel

p{ font-size: 0.8em;}
p.gross{ font-size: larger;}

font-size

fontzur Übersichteins nach oben    

In der font Eigenschaft können alle einzelnen Eigenschaften der Schriftformatierung zusammen gefasst werden. Die Werte werden hintereinander, mit Leerzeichen getrennt notiert.

Werte

font-style | font-variant | font-weight | font-size | line-height | font-family

Verpflichtend sind die Angaben font-size und font-family. Bei einer Zusammenfassung der Eigenschaften ist die oben angeführte Reihenfolge einzuhalten, es müssen aber nicht alle Eigenschaften aufgeführt werden. Für nicht aufgeführte Eigenschaften werden die Standardwerte gesetzt. Der Wert line-height erfordert den Wert font-size, zwischen beiden Werten ein Schrägstrich stehen.

Standardwert sind die Standardwerte der jeweiligen Eigenschaften

Vererbung

Ja

Beispiel

p{ font: italic bold 0.8em/1.6em Verdana, sans-serif;}
ist die Zusammenfassung von:
p{ font-style: italic; font-variant: bold; font-size: 0.8em; line-height: 1.6em; font-family: Verdana, sans-serif;}

font