HTML5-Handbuch - die neuen Features von HTML5

eingesetzt, um Schriftzügen dadurch eine individuelle Prägung zu verleihen.
Beispiel
    

    
    kleiner Beispieltext mit blauer Farbe
    

    
    großer Beispieltext mit oranger Farbe
    
    

    

    Großer blauer Text mit schwarzem Schatten
    

    Bild 14.5: Schriftfarbe und Schriftschatten
Erläuterung
    Die Schriftfarbe bestimmen Sie mit der Eigenschaft
color
. Erlaubt sind als Wert alle Arten von Farbangaben in CSS, wie sie auch in 13.4.2 Farbwerte und Farbnamen beschrieben sind.
    Mit
text-shadow:
können Sie einen Textschatten erzwingen. Erlaubt sind auch hierbei Farbangaben oder der explizite Wert
none
für »keinen Textschatten« sowie nummerische Angaben, jedoch keine Prozentangaben.
    Der erste nummerische Wert definiert die horizontale Position des Schattens unter dem Text, der zweite Wert die vertikale. Eine optionale dritte Längenangabe definiert den Unschärferadius, das heißt, wie weit sich der Schatten in den Hintergrund erstreckt. Es lassen sich mehrere Schatten für ein Element definieren, indem weitere Sätze dieser Angaben nach einem Komma hinzugefügt werden. Beispielsweise erzeugt
text-shadow:
black
0
0
5px,
red
5px
5px
3px;
einen schwarzen sowie einen roten Schatten.
Beispiel
    CSS-Eigenschaften
color
:

    CSS-Eigenschaften
text-shadow
:

14.1.6   Schriftattribute und automatische Text-Transformationen
    Für das Schriftgewicht (Fettschrift) und die Schriftneigung (Kursivschrift) gibt es eigene CSS-Eigenschaften (
font-weight
und
font-style
). Einige weitere typische Schriftattribute, wie unterstrichen oder durchgestrichen werden in CSS dagegen mit Hilfe der hier beschriebenen Eigenschaft
text-decoration
realisiert. Die Eigenschaft
text-transform
ergänzt die Möglichkeiten um Effekte wie automatisch groß geschriebene Wortanfänge und dergleichen.
Beispiel
    
    
    
    
    
    
    
    
    

    Sie kennen sicher die
    Einstiegsseite.

    Aber kennen Sie auch die
    Spezialseite?
    

    

    
    kleiner Beispieltext mit Text-Transformation capitalize
    

    
    großer Beispieltext mit Text-Transformation capitalize
    
    

    
    
Erläuterung
    Die Eigenschaft
text-decoration
ersetzt obsolete HTML-Formatierungen zum Unterstreichen (
text-decoration:
underline;
) und Durchstreichen (
text-decoration:
line-through;
) von Text. Dazu kommt die mögliche Angabe
text-decoration:
overline;
für überstrichenen Text. Und last but not least springt die Eigenschaft auch ein, um das uralte, proprietäre und berüchtigte

-Tag von Netscape zu ersetzen:
text-decoration:
blink;
erzeugt blinkenden Text.
    Mit
text-transform:
können Sie wie im obigen Beispiel Wortanfänge als Großbuchstaben erzwingen (
text-transform:
capitalize
). Ferner können Sie für einen normal notierten Text die durchgängige Darstellung in Großbuchstaben (
text-transform:
uppercase
) oder in Kleinbuchstaben (
text-transform:
lowercase
) erzwingen.
Weitere Hinweise
    Nicht jeder Browser kennt die korrekten Umformungsregeln für Großbuchstaben bei der Angabe
uppercase
, so kann es z. B. geschehen, dass das ß nicht zu ss umgewandelt wird.
Referenzinformationen
    CSS-Eigenschaften
text-decoration
,
    CSS-Eigenschaften
text-transform
:

14.2      Schriftformatierung mit Schriftartendatei
    Die Idee der sogenannten Web-Fonts ist schon sehr alt. Web-Fonts sind Schriftarten, deren Schriftartendatei einfach wie ein externes Stylesheet oder eine Grafik zusammen mit dem HTML-Code einer Webseite vom Webserver an den Browser übertragen wird. Einmal heruntergeladen und installiert oder interpretiert, befähigt sie den Browser, einen Text in dieser Schriftart anzuzeigen. Die Web-Font-Bemühungen der Vergangenheit waren jedoch ein unerquickliches und letztlich unfruchtbares Gerangel proprietärer Ansätze mit rein kommerziellem Hintergrund. Die Belange der Web-Designer blieben dabei außen vor. Mittlerweile ist allerdings