SELFHTML: CSS / Style-Sheet-Angaben / Schriftformatierung
Description: (SELFHTML 7.0) Übersicht zu CSS-Style-Sheet-Angaben, um Text bzw. Schrift individuell zu formatieren
Keywords: SELFHTML, HTML, Dynamic

SELFHTML/Quickbar CSS Style-Sheets Style-Sheet-Angaben

| ## Style-Sheet-Angaben: Schriftformatierung
| Allgemeines zur Schriftformatierung Schriftart (font-family) Schriftstil (font-style) Schriftvariante (font-variant) Schriftgröße (font-size) Schriftgewicht (font-weight) Schrift allgemein (font) Wortabstand (word-spacing) Zeichenabstand (letter-spacing) Textdekoration (text-decoration) Texttransformation (text-transformation) Textfarbe (color) Textschatten (text-shadow)

## 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-Tags, die Text enthalten können. Dazu gehören alle Tags, die im Kapitel über Textformatierung beschrieben werden, aber auch Tags für Tabellen. Auch auf das `<body>`-Tag lassen sich die hier aufgelisteten Style-Sheet-Angaben anwenden - in diesem Fall gelten die Angaben für alle Textelemente der gesamten HTML-Datei.

## Schriftart (font-family)

Anzeigebeispiel: So sieht's aus

Unter Schriftarten sind Schriftarten wie etwa Arial, Helvetica, Times Roman usw. zu verstehen. Auch Schriftfamilien wie Sans Serif usw. gehören dazu.

Mit dem hier beschriebenen Befehl können Sie Schriftarten angeben, ohne sich darum zu kümmern, 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 (Style-Sheet-Definition im Dateikopf):

    <style type="text/css">
      h1,h2,h3 { font-familiy:Avantgarde,Arial }
    </style>

### 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 die Schriftartennamen durch Kommata. Das W3-Konsortium empfiehlt, Schriftartnamen, die Leerzeichen enthalten, in Anführungszeichen zu setzen, also z.B. `font-familiy:"Century Schoolbook",Times`.

Folgende Schriftfamilien sind fest vordefiniert - diese Angaben können Sie also neben Schriftartnamen benutzen: `serif`, `sans-serif`, `cursive`, `fantasy` und `monospace`.

### Beachten Sie:

Angaben zu Schriftarten, die bei Ihnen nicht angezeigt werden können, werden vom Browser ignoriert, oder der Browser erkennt eine Typenzugehörigkeit und verwendet eine ähnliche Schriftart.

## Schriftstil (font-style)

Anzeigebeispiel: So sieht's aus

Schriftstil bedeutet die Neigung der Schrift.

### Beispiel (Style-Sheet-Definition für HTML-Tag im Text):

    <p style="font-style:italic">Text</p>

### Erläuterung:

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

`italic` = Schriftstil kursiv.
`oblique` = Schriftstil kursiv.
`normal` = normaler Schriftstil.

## Schriftvariante (font-variant)

Anzeigebeispiel: So sieht's aus

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

### Beispiel (Style-Sheet-Definition im Dateikopf):

    <style type="text/css">
      h4 { font-variant:small-caps }
    </style>

### Erläuterung:

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

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

## Schriftgröße (font-size)

Anzeigebeispiel: So sieht's aus

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

### Beispiel (Style-Sheet-Definition für HTML-Tag im Text):

    <h2 style="font-size:24pt">Text</h2>
    <p style="font-size:130%">Text</p>

### Erläuterung:

Mit `font-size:` können Sie die Schriftgröße bestimmen. Erlaubt ist eine numerische Angabe. Auch eine prozentuale Angabe ist möglich. Die Angabe 130% im obigen Beispiel bedeutet: 130% im Verhältnis zur normalen Schriftgröße, die als 100% gedacht ist.

Alternativ zu numerischen Angaben sind auch folgende "ungenaue" Angaben möglich:

`xx-small` = winzig.
`x-small` = sehr klein.
`small` = klein.
`medium` = mittel.
`large` = groß.
`x-large` = sehr groß.
`xx-large` = riesig.
`smaller` = sichtbar kleiner als normal.
`larger` = sichtbar größer als normal.

### Beachten Sie:

Sie können die Angabe zur Schriftgröße mit der Angabe zur Zeilenhöhe kombinieren, indem Sie beide Angaben innerhalb der Angabe `font:` mit der folgenden Syntax notieren (Beispiel): `p { font:12pt/14pt }`. In dem Beispiel ist 12pt die Schriftgröße und 14pt die Zeilenhöhe.

## Schriftgewicht (font-weight)

Anzeigebeispiel: So sieht's aus

Schriftgewicht ist der Fettigkeitsgrad, in dem die Schrift dargestellt wird.

### Beispiel (Style-Sheet-Definition im Dateikopf):

    <style type="text/css">
      dt { font-weight:bold }
      em { font-weight:600 }
    </style>

### Erläuterung:

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

`bold` = fett.
`bolder` = extra-fett.
`lighter` = dünner.
`100,200,300,400,500,600,700,800,900` = extra-dünn (`100`) bis extra-fett (`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.

## Schrift allgemein (font)

Anzeigebeispiel: So sieht's aus

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

### Beispiel (Style-Sheet-Definition für HTML-Tag im Text):

    <p style="font:bold italic 12pt Palatino, serif">Text</p>

### Erläuterung:

Mit `font:` können Sie verschiedene Schriftformatierungen mischen. Erlaubt sind die üblichen Wertangaben zu den erlaubten Stlye-Sheet-Angaben, die in `font:` zusammengefaßt sind. Die Reihenfolge der Angaben ist egal.

## Wortabstand (word-spacing)

Anzeigebeispiel: So sieht's aus

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

### Beispiel (Style-Sheet-Definition im Dateikopf):

    h3 { word-spacing:8mm }

### Erläuterung:

Mit `word-spacing:` können Sie die Wortabstand bestimmen. Erlaubt ist eine numerische Angabe. Auch eine prozentuale Angabe ist möglich.

### Beachten Sie:

Diese Angabe wird von Netscape und dem MS Internet Explorer in den Versionen 4.x noch nicht interpretiert.

## Zeichenabstand (letter-spacing)

Anzeigebeispiel: So sieht's aus

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

### Beispiel (Style-Sheet-Definition für HTML-Tag im Text):

    <b style="letter-spacing:3em">fetter breiter Text</b>

### Erläuterung:

Mit `letter-spacing:` können Sie die Schriftgröße bestimmen. Erlaubt ist eine numerische Angabe. Auch eine prozentuale Angabe ist möglich.

### Beachten Sie:

Diese Angabe wird nur vom MS Internet Explorer, nicht von Netscape interpretiert. Der MS Internet Explorer erlaubt keine Prozentangaben.

## Textdekoration (text-decoration)

Anzeigebeispiel: So sieht's aus

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

### Beispiel (Style-Sheet-Definition im Dateikopf):

    strong { text-decoration:underline }

### Erläuterung:

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

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

### Beachten Sie:

Der MS Internet Explorer interpretiert die Angabe `blink` nicht. Netscape 4.x interpretiert die Angabe `overline` nicht.

## Texttransformation (text-transform)

Anzeigebeispiel: So sieht's aus

Mit dieser Angabe 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 (Style-Sheet-Definition für HTML-Tag im Text):

    <h1 style="text-transform:uppercase">alles grossgeschrieben</h1>

### Erläuterung:

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

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

### Beachten Sie:

Der MS Internet Explorer 4.x interpretiert die Angabe `capitalize` noch nicht.

## Textfarbe (color)

Anzeigebeispiel: So sieht's aus

Mit dieser Angabe können Sie Textvordergrundfarben bestimmen.

### Beispiel (Style-Sheet-Definition im Dateikopf):

    b,i { color:#CC0000 }

### Erläuterung:

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

### Tip:

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

## Textschatten (text-shadow)

Anzeigebeispiel: So sieht's aus

Mit dieser Angabe können Sie für Text einen Schatteneffekt erzeugen.

### Beispiel (Style-Sheet-Definition für HTML-Tag im Text):

    <p style="text-shadow:black; font-size:24pt;">Text</p>

### Erläuterung:

Mit `text-shadow:` können Sie einen Textschatten erzwingen. Erlaubt sind Farbangaben oder der Wert `none` für "keinen Textschatten".

### Beachten Sie:

Dieser Befehl, der zur Version 2.0 der CSS Style-Sheets gehört, wird von Netscape und MS Internet Explorer in den Versionen 4.x noch nicht interpretiert.

weiter: | Style-Sheet-Angaben: Schriftformatierung mit Schriftartendatei
zurück: | Maßeinheiten, Farbangaben, feste Angaben

SELFHTML/Quickbar CSS Style-Sheets Style-Sheet-Angaben

© 1998 Stefan Münz, muenz@csi.com