Schriftformatierung
font-family | font-style | font-variant | font-weight | font-size | font
font-familyzur Übersicht 
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-stylezur Übersicht
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-variantzur Übersicht
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-weightzur Übersicht
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-sizezur Übersicht
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;}
fontzur Übersicht
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;}
