HTML5-Handbuch - die neuen Features von HTML5

italic 1cm Helvetica; }
    #Text03 { font: small-caps 110% Verdana; }
    #Text04 { font: 2em/180% Courier; }
    
    
    
    

Beispieltext mit Schrift: bold 0.9em Times

    

Beispieltext mit Schrift: italic 1cm Helvetica

    

Beispieltext mit Schrift: small-caps 110% Verdana

    

    Beispieltext mit Schrift: 2em/180% Courier

    und einem Zeilenumbruch
    

    
    
    Bild 14.3: font-Beispiel im Browser
Erläuterung
    Mit
font:
können Sie verschiedene Schriftformatierungen kombinieren. Erlaubt sind die üblichen Wertangaben zu den möglichen Eigenschaften, die in
font
zusammengefasst sind. Es müssen nicht alle Eigenschaften angegeben werden. Jedoch sind Angaben zu Schriftgröße und Schriftart verpflichtend. Auch eine einzuhaltende Reihenfolge und ein paar besondere Regeln gibt es:
font-family
wird als letzte Eigenschaft notiert. Die Eigenschaften für Schriftgröße und Zeilenhöhe müssen, sofern sie beide notiert werden, wie im vierten obigen Beispiel mit einem Schrägstrich getrennt werden. Der erste Wert bedeutet die Schriftgröße, der zweite die Zeilenhöhe. Wenn Sie nur einen nummerischen Wert angeben, bedeutet dieser automatisch die Schriftgröße, nicht die Zeilenhöhe.
Referenzinformationen
    CSS-Eigenschaften
font
:

14.1.4    Zeichenabstand, Wortabstand und Schriftlaufweite
    Schriftart, Schriftgröße und Zeilenhöhe sind wichtige Aspekte für das typografische Erscheinungsbild größerer Texte. Aber auch die hier beschriebenen Eigenschaften für Abstände und Laufweite beeinflussen das Erscheinungsbild von Schriften nachhaltig. Allerdings sind sie tendenziell eher für besondere, abweichende Formatierungen gedacht und weniger für Standard-Formate.
Beispiel
    

    
    Beispieltext mit Wortabstand 0.5em
    

    
    Beispieltext mit Wortabstand 1em
    

    
    Beispieltext mit Zeichenabstand 0.1em
    

    
    Beispieltext mit Zeichenabstand 0.3em
    
    

    

    
    kleiner Beispieltext mit Laufweite wider
    

    
    großer Beispieltext mit Laufweite wider
    
    

    

    
    kleiner Beispieltext mit Laufweite narrower
    

    
    großer Beispieltext mit Laufweite narrower
    
    

    Bild 14.4: Die Angabe zur Schriftlaufweite ist noch nicht praxisrelevant.
Erläuterung
    Mit
word-spacing:
können Sie den Abstand zwischen Wörtern bestimmen, mit
letter-spacing
die Abstände zwischen allen einzelnen Zeichen. Erlaubt sind in beiden Fällen nummerische Angaben, jedoch keine Prozentangaben.
    Die Eigenschaft
font-stretch:
(Schriftlaufweite) stellt höhere Anforderungen an die Rendering-Fähigkeiten von Betriebssystem und Browser. In CSS2 war sie gelistet, in CSS 2.1 wegen mangelnder Praxisrelevanz nicht mehr, doch in CSS3 ist sie wieder zu finden. Die Laufweite wird mit Schlüsselwörtern angegeben. So bedeutet
wider
weiter als normal,
narrower
enger als normal,
condensed
gedrängt,
semi-condensed
halb gedrängt,
extra-condensed
stark gedrängt,
ultra-condensed
extrastark gedrängt,
expanded
geweitet,
semi-expanded
halb geweitet,
extra-expanded
stark geweitet und
ultra-expanded
extrastark geweitet.
Referenzinformationen
    CSS-Eigenschaften
word-spacing
,
    CSS-Eigenschaften
letter-spacing
:

    CSS-Eigenschaften
font-stretch
:

14.1.5    Schriftfarbe und Schrift mit Schatteneffekt
    Die Schriftfarbe ist eine wichtige und fast in allen Stylesheets vorkommende Eigenschaft. Der Grund ist einerseits, dass in Webseitenlayouts häufig farbige oder unterlegte Flächen vorkommen. Text auf solchen Flächen muss so angepasst werden, dass er hinreichend kontrastiert. Aber auch bei gewöhnlichen »Schwarz-auf-Weiß«-Texten wird häufig unauffällig die Schriftfarbe gesetzt. Denn reines Schwarz auf reinem Weiß wirkt auf modernen Computermonitoren bei größeren Texten schnell ermüdend. Deshalb wird häufig eine nicht ganz schwarze Schriftfarbe gewählt.
    Während die Schriftfarbe zu den Standard-Eigenschaften gehört, die in fast jedem Stylesheet dutzendfach vorkommen, sind Schriftschatten eher für hervorgehobene Schriftzüge gedacht. Im Webdesign der letzten Jahre werden Schriftschatten häufig sehr dezent