SELFHTML: Stylesheets / CSS-Eigenschaften / Schriftformatierung
Author: Redaktion SELFHTML, selfhtml81@selfhtml.org
Description: Welche CSS-Eigenschaften es gibt, um Text mit Angaben zur Schriftart, Schriftgröße, Schriftfarbe usw. zu formatieren.
Keywords: SELFHTML, CSS, Stylesheets, Cascading Stylesheets, HTML, CSS-Eigenschaften, Schrift, Schriftformatierung, Textformatierung, font-family, font-style, font-variant, font-size, font-weight, font-stretch, font, word-spacing, letter-spacing, text-decoration, text-transformation, color, text-shadow
Date: 2005-11-12T15:42:06+01:00

| # Schriftformatierung
| Allgemeines zur Schriftformatierung font-family (Schriftart) font-style (Schriftstil) font-variant (Schriftvariante) font-size (Schriftgröße) font-weight (Schriftgewicht) font (Schrift allgemein) word-spacing (Wortabstand) letter-spacing (Zeichenabstand) text-decoration (Textdekoration) text-transform (Text-Transformation) color (Textfarbe) text-shadow (Textschatten) font-stretch (Schriftlaufweite)

## Allgemeines zur Schriftformatierung

Unter Schriftformatierung sind Angaben zu Schriftarten, Schriftgrößen, Schriftfarben, Schriftgewicht, Zeichen- und Wortabständen usw. zu verstehen. Sinnvoll sind solche Angaben für alle HTML-Elemente, die Text enthalten können. Dazu gehören alle Elemente, die im Kapitel Absatztypen und Text beschrieben werden, aber auch beispielsweise Elemente für Tabellen. Auch auf das `html`- und das `body`-Element lassen sich die hier aufgelisteten Stylesheet-Angaben anwenden - in diesem Fall gelten die Angaben für alle Text-Elemente der HTML-Datei.

## font-family (Schriftart)

Schriftarten sind beispielsweise Arial, Helvetica, Times Roman usw. Auch Schriftfamilien wie Sans Serif usw. gehören dazu.

Bei der hier beschriebenen Eigenschaft können Sie Schriftarten angeben, ohne sich darum kümmern zu müssen, ob und wie die Schriftart beim Anwender angezeigt werden kann. Falls die angegebene Schriftart nicht angezeigt werden kann, bleibt die Angabe wirkungslos. Eine Möglichkeit, Schriftarten durch Angabe einer bestimmten Schriftarten-Datenquelle zu erzwingen, wird im Abschnitt Schriftformatierung mit Schriftartendatei beschrieben.

### Beispiel:

Anzeigebeispiel: So sieht's aus

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
    <html><head><title>font-family</title></head>
    <body>

    <p><span style="font-family:'Times New Roman',Times,serif">kleiner Beispieltext
    in Times New Roman</span><br>
    <span style="font-family:'Times New Roman',Times,serif; font-size:200%">großer Beispieltext
    in Times New Roman</span></p>

    <p><span style="font-family:Verdana">kleiner Beispieltext
    in Verdana</span><br>
    <span style="font-family:Verdana; font-size:200%">großer Beispieltext
    in Verdana</span></p>

    <!--usw.-->

    </body></html>

### Erläuterung:

Mit `font-family:` können Sie eine oder mehrere Schriftarten bestimmen. Bei mehreren angegebenen Schriftarten ist die Reihenfolge der Angabe entscheidend: ist die erste angegebene Schriftart verfügbar, wird diese verwendet. Ist sie nicht verfügbar, wird die zweite Schriftart verwendet, falls diese verfügbar ist usw.

Trennen Sie mehrere Schriftartennamen durch Kommata. Das W3-Konsortium empfiehlt, Schriftartnamen, die Leerzeichen enthalten, in Anführungszeichen zu setzen, also z.B. `font-family:"Century Schoolbook",Times`. Sie können dazu die doppelten oder die einfachen Anführungszeichen (Hochkomma) verwenden. Falls die CSS-Eigenschaften wie im obigen Beispiel innerhalb eines `style`-Attributs im HTML-Quelltext vorkommen, dürfen Sie nicht die gleichen Anführungszeichen verwenden wie bei der HTML-Attributzuweisung. Im obigen Beispiel sehen Sie, dass die Wertzuweisung an das `style`-Attribut wie in doppelten Anführungszeichen steht. Innerhalb davon werden für `'Times New Roman'` deshalb einfache Anführungszeichen verwendet, um Konflikte zu vermeiden.

#### Generische Schriftfamilien

Folgende generische Schriftfamilien sind fest vordefiniert - diese Angaben können Sie also neben Schriftartnamen benutzen:

`serif` = eine Schriftart mit Serifen,
`sans-serif` = eine Schriftart ohne Serifen,
`cursive` = eine Schriftart für Schreibschrift,
`fantasy` = eine Schriftart für ungewöhnliche Schrift,
`monospace` = eine Schriftart mit dicktengleichen Zeichen.

Es empfiehlt sich, solche generische Schriftarten als letzte Angabe einer Wertzuweisung an `font-family` zu notieren - wie im ersten der obigen Beispiele. Damit bieten Sie dem Browser die Chance, eine Schriftart auszuwählen, die zumindest vom Typ her der gewünschten entspricht, falls diese auf dem System nicht vorhanden ist.

## font-style (Schriftstil)

Schriftstil bedeutet die Neigung der Schrift.

### Beispiel:

Anzeigebeispiel: So sieht's aus

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
    <html><head><title>font-style</title>
    <style type="text/css">
    .kursiv { font-style:italic; }
    .grosskursiv { font-style:italic; font-size:200%; }
    </style>
    </head>
    <body>

    <p><span class="kursiv">kleiner Beispieltext mit Schriftstil italic</span><br>
    <span class="grosskursiv">gro&szlig;er Beispieltext mit Schriftstil italic</span></p>

    </body></html>

### Erläuterung:

Mit `font-style:` können Sie den Schriftstil bestimmen. Folgende Angaben sind möglich:

`italic` = kursiver Schriftstil.
`oblique` = schräggestellter Schriftstil.
`normal` = normaler Schriftstil.

## font-variant (Schriftvariante)

Als besondere Schriftvariante stehen Kapitälchen (kleine Großbuchstaben) zur Verfügung.

### Beispiel:

Anzeigebeispiel: So sieht's aus

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
    <html><head><title>font-variant</title></head>
    <body>

    <p><span style="font-variant:normal">kleiner Beispieltext
    mit Schriftvariante normal</span><br>
    <span style="font-variant:normal; font-size:200%">großer
    Beispieltext mit Schriftvariante normal</span></p>

    <p><span style="font-variant:small-caps">kleiner Beispieltext
    mit Schriftvariante small-caps</span><br>
    <span style="font-variant:small-caps; font-size:200%">gro&szlig;er
    Beispieltext mit Schriftvariante small-caps</span></p>

    </body></html>

### Erläuterung:

Mit `font-variant:` können Sie die Schriftvariante bestimmen. Folgende Angaben sind möglich:

`small-caps` = Kapitälchen.
`normal` = normale Schriftvariante.

## font-size (Schriftgröße)

Schriftgröße ist die Darstellungsgröße der Schrift.

### Beispiel:

Anzeigebeispiel: So sieht's aus

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
    <html><head><title>font-size</title></head>
    <body>
    <p>
    <span style="font-size:1.2em">Beispieltext mit Schriftgröße 1.2em</span><br>
    <!-- usw. -->
    </p></body></html>

### Erläuterung:

Mit `font-size:` können Sie die Schriftgröße bestimmen. Erlaubt ist eine numerische Angabe. Auch Prozentangaben sind erlaubt. Prozentwerte beziehen sich auf die Schriftgröße des Elternelements.

Alternativ zu numerischen Angaben sind auch absolute und relative Schlüsselworte möglich.

Absolut:
`xx-small` = winzig.
`x-small` = sehr klein.
`small` = klein.
`medium` = mittel.
`large` = groß.
`x-large` = sehr groß.
`xx-large` = riesig.

Relativ:
`smaller` = kleiner als im Elternelement.
`larger` = größer als im Elternelement.

### Beachten Sie:

Für die Ausgabe auf dem Bildschirm sind vor allem relative Einheiten wie `em`, `ex`, Prozentwerte oder Schlüsselworte geeignet, absolute Einheiten wie `pt`, `cm` usw. sollten Drucklayouts vorbehalten sein. Eine Sonderstellung nimmt die relative Einheit `px` ein, da sich bei deren Verwendung Schriftgrößen im Internet Explorer nicht mehr verändern lassen. Im Sinne der Benutzbarkeit sollten Sie daher auf diese Einheit nach Möglichkeit verzichten.

Sie können die Angabe zur Schriftgröße mit der Angabe zur Zeilenhöhe kombinieren, indem Sie beide Angaben innerhalb der Eigenschaft font mit der folgenden Syntax notieren:

    p { font:1.2em/1.5em }

In dem Beispiel ist 1.2em die Schriftgröße und 1.5em die Zeilenhöhe. Bei dieser Notationsweise bezeichnet der Wert vor dem Schrägstrich stets die Schriftgröße und der Wert hinter dem Schrägstrich stets die Zeilenhöhe.

## font-weight (Schriftgewicht)

Das Schriftgewicht bezeichnet die Dicke und Stärke einer Schrift.

### Beispiel:

Anzeigebeispiel: So sieht's aus

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
    <html><head><title>font-weight</title>
    </head><body>

    <p><span style="font-weight:bold">kleiner Beispieltext
    mit Schriftgewicht bold</span><br>
    <span style="font-weight:bold; font-size:200%">großer Beispieltext
    mit Schriftgewicht bold</span></p>

    <!--usw.-->

    <p><span style="font-weight:100">kleiner Beispieltext
    mit Schriftgewicht 100</span><br>
    <span style="font-weight:100; font-size:200%">großer Beispieltext
    mit Schriftgewicht 100</span></p>

    <!--usw.-->
    </body></html>

### Erläuterung:

Mit `font-weight:` können Sie das Schriftgewicht bestimmen. Folgende Angaben sind möglich:

`bold` = fett.
`bolder` = extrafett.
`lighter` = dünner.
`100,200,300,400,500,600,700,800,900` = extra-dünn (`100`) bis extrafett (`900`).
`normal` = normales Schriftgewicht.

Bei den numerischen Werten entspricht die Angabe `500` dem im DTP-Bereich üblichen Begriff medium, und die Angabe `700` entspricht dem Begriff bold.

### Beachten Sie:

Wohl kaum eine installierte Schriftart unterstützt alle erlaubten Angaben zum Schriftgewicht.

## font (Schrift allgemein)

Diese Eigenschaft ist eine Zusammenfassung der folgenden fakultativen Einzelangaben:
font-style
font-variant
font-weight
font-size
line-height
font-family

### Beispiel:

Anzeigebeispiel: So sieht's aus

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
    <html><head><title>font</title>
    <style type="text/css">
    #Text01 { font:bold .9em Times; }
    #Text02 { font:italic 1cm Helvetica; }
    #Text03 { font:small-caps 110% Verdana; }
    #Text04 { font:2em/180% Courier; }
    </style></head>
    <body>

    <p id="Text01">Beispieltext mit Schrift: bold .9em Times</p>
    <p id="Text02">Beispieltext mit Schrift: italic 1cm Helvetica</p>
    <p id="Text03">Beispieltext mit Schrift: small-caps 110% Verdana</p>
    <p id="Text04">Beispieltext mit Schrift: 2em/180% Courier<br>und einem Zeilenumbruch</p>

    </body></html>

### Erläuterung:

Mit `font:` können Sie verschiedene Schriftformatierungen kombinieren. Erlaubt sind die üblichen Wertangaben zu den erlaubten Eigenschaften, die in `font` zusammengefasst sind. Es müssen nicht alle Eigenschaften angegeben werden, denn lediglich `font-size` und `font-family` sind verpflichtend. Die in der Zusammenfassung verwendete Reihenfolge ist aber einzuhalten; `font-family` wäre also beispielsweise als letzte Eigenschaft zu notieren. Die Eigenschaften `font-size` und `line-height` sind, sofern sie beide notiert werden, wie im vierten Beispiel mit einem Schrägstrich zu trennen. Der erste Wert definiert `font-size`, der zweite `line-height`. Wird an dieser Stelle lediglich ein Wert angegeben, so steht dieser für `font-size`, da `line-height` optional ist.

### Beachten Sie:

Zunächst werden alle `font`-Eigenschaften auf ihren Ausgangswert zurückgesetzt und somit nur die ausdrücklich definierten Eigenschaften angewandt.

## word-spacing (Wortabstand)

Mit dieser Eigenschaft können Sie den Abstand zwischen Wörtern im Text bestimmen.

### Beispiel:

Anzeigebeispiel: So sieht's aus

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
    <html><head><title>word-spacing</title>
    </head><body>
    <p>
    <span style="word-spacing:0.5em">Beispieltext mit Wortabstand 0.5em</span><br>
    <span style="word-spacing:1em">Beispieltext mit Wortabstand 1em</span><br>
    <!--usw.-->
    </p>
    </body></html>

### Erläuterung:

Mit `word-spacing:` können Sie den Wortabstand bestimmen. Erlaubt sind numerische Angaben, jedoch keine Prozentangaben.

## letter-spacing (Zeichenabstand)

Mit dieser Eigenschaft können Sie den Abstand zwischen den Buchstaben bzw. Zeichen im Text bestimmen.

### Beispiel:

Anzeigebeispiel: So sieht's aus

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
    <html><head><title>letter-spacing</title>
    </head><body>
    <p>
    <span style="letter-spacing:0.1em">Beispieltext mit Zeichenabstand 0.1em</span><br>
    <span style="letter-spacing:0.3em">Beispieltext mit Zeichenabstand 0.3em</span><br>
    <!--usw.-->
    </p>
    </body></html>

### Erläuterung:

Mit `letter-spacing:` können Sie den Zeichenabstand bestimmen. Erlaubt sind numerische Angaben, jedoch keine Prozentangaben.

## text-decoration (Textdekoration)

Mit dieser Eigenschaft können Sie zusätzliche Textformatierungen wie unterstrichenen oder durchgestrichenen Text erzwingen.

### Beispiel:

Anzeigebeispiel: So sieht's aus

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
    <html><head><title>text-decoration</title>
    <style type="text/css">
    a:link { text-decoration:none; }
    a:visited { text-decoration:line-through; }
    a:hover { text-decoration:underline; }
    a:active { text-decoration:underline; }
    a:focus { text-decoration:blink; }
    </style>
    </head><body>

    <p>
    Sie kennen sicher die <a href="../../../index.htm">Einstiegsseite zu SELFHTML</a>.<br>
    Aber kennen Sie auch die <a href="../../../perl/module/cpanmodule.htm">CPAN-Module</a>?<br>
    Oder die <a href="../../../diverses/sprachenlaenderkuerzel.htm">Sprachen- und Länderkürzel</a>?<br>
    Mit der <a href="../schrift.htm#text_decoration">Textdekoration</a> sind Sie bereits vertraut?
    </p>

    </body>
    </html>

### Erläuterung:

Mit `text-decoration:` können Sie die zusätzliche Formatierung bestimmen. Folgende Angaben sind möglich:

`underline` = unterstrichen.
`overline` = überstrichen.
`line-through` = durchgestrichen.
`blink` = blinkend.
`none` = normal (keine Text-Dekoration).

### Beachten Sie:

Internet Explorer und Konqueror interpretieren die Angabe `blink` nicht. Netscape 4.x interpretiert die Angabe `overline` noch nicht, Netscape 6.0 jedoch schon.

## text-transform (Text-Transformation)

Mit dieser Eigenschaft können Sie in einem Textbereich Klein- oder Großbuchstaben oder Kapitälchen erzwingen, unabhängig davon, wie die einzelnen Buchstaben tatsächlich in der Datei stehen.

### Beispiel:

Anzeigebeispiel: So sieht's aus

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
    <html><head><title>text-transform</title>
    </head><body>

    <p><span style="text-transform:capitalize">kleiner Beispieltext
    mit Text-Transformation capitalize</span><br>
    <span style="text-transform:capitalize; font-size:200%">großer Beispieltext
    mit Text-Transformation capitalize</span></p>

    <!--usw.-->

    </body>
    </html>

Mit `text-transform:` können Sie die Transformation bestimmen. Folgende Angaben sind möglich:

`capitalize` = Wortanfänge als Großbuchstaben.
`uppercase` = Nur Großbuchstaben.
`lowercase` = Nur Kleinbuchstaben.
`none` = normal (keine Text-Transformation).

### Beachten Sie:

Der Internet Explorer 4 interpretiert die Angabe `capitalize` noch nicht. 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.

## color (Textfarbe)

Mit dieser Angabe können Sie Textvordergrundfarbe bzw. Schriftfarbe bestimmen.

### Beispiel:

Anzeigebeispiel: So sieht's aus

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
    <html><head><title>color</title>
    </head><body>

    <p><span style="color:blue">kleiner Beispieltext mit Farbe <strong>blue</strong></span><br>
    <span style="color:blue;font-size:200%">großer Beispieltext
    mit Farbe <strong>blue</strong></span></p>

    <!--usw.-->
    </body></html>

### Erläuterung:

Mit `color:` können Sie die Textfarbe bestimmen. Erlaubt sind Farbangaben.

### Beachten Sie:

Zum Definieren von Farben können Sie den SELFHTML Farbauswähler benutzen.

## text-shadow (Textschatten)

In CSS2 war vorgesehen, hiermit einen Schatteneffekt für Text zu erzeugen.
Wegen mangelnder Browserunterstützung wird diese Eigenschaft jedoch in CSS 2.1 nicht übernommen werden.

### Beispiel:

Anzeigebeispiel: So sieht's aus

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
    <html><head><title>text-shadow</title>
    <style type="text/css">
    #rotschattig  { text-shadow:black 3px 2px; font-size:3em; color:red; }
    #blauschattig { text-shadow:black 3px 2px 4px; font-size:3em; color:blue; }
    </style>
    </head><body>

    <p id="rotschattig">Großer roter Text mit schwarzem Schatten</p>
    <p id="blauschattig">Großer blauer Text mit schwarzem Schatten</p>

    </body></html>

### Erläuterung:

Mit `text-shadow:` können Sie einen Textschatten erzwingen. Erlaubt sind Farbangaben oder der Wert `none` für "keinen Textschatten" sowie numerische Angaben, jedoch keine Prozentangaben.

Der erste numerische 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 der Schatten im Hintergrund verläuft. 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.

### Beachten Sie:

Diese Eigenschaft, die zu CSS2 gehört, wird bislang nur von Safari ab Version 1.1 und Konqueror ab Version 3.4 interpretiert. Im Gegensatz zum Konqueror unterstützt Safari noch nicht die Möglichkeit mehrerer Schatten.

## font-stretch (Schriftlaufweite)

In CSS2 war vorgesehen, hiermit die Schriftlaufweite angeben zu können, also wie schmal oder breit eine Schrift erscheint.
Wegen mangelnder Browserunterstützung wird diese Eigenschaft jedoch in CSS 2.1 nicht übernommen werden.

### Beispiel:

Anzeigebeispiel: So sieht's aus

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
    <html><head><title>font-stretch</title>
    </head><body>

    <p><span style="font-stretch:wider">kleiner Beispieltext mit Laufweite wider</span><br>
    <span style="font-stretch:wider; font-size:200%">großer Beispieltext
    mit Laufweite wider</span></p>

    <p><span style="font-stretch:narrower">kleiner Beispieltext mit Laufweite narrower</span><br>
    <span style="font-stretch:narrower; font-size:200%">großer Beispieltext
    mit Laufweite narrower</span></p>

    <!--usw.-->
    </body></html>

### Erläuterung:

Mit `font-stretch:` sollte die Laufweite der Schrift bestimmt werden. Folgende Angaben waren vorgesehen:

`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.
`ultra-expanded` = extrastark geweitet.
`normal` = normale Laufweite.

| Schriftformatierung mit Schriftartendatei
| Das Box-Modell

© 2007 Impressum