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


Style-Sheet-Angaben: Schriftformatierung

Diese Seite ist ein Dokument mit Informationstext

 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.

 

CSS1.0MS IE3.0Netscape 4.0 Schriftart (font-family)

Beispiel 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-family: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-family:"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.

 

CSS1.0MS IE3.0Netscape 4.0 Schriftstil (font-style)

Beispiel 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.

 

CSS1.0MS IE4.0 Schriftvariante (font-variant)

Beispiel 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.

 

CSS1.0MS IE3.0Netscape 4.0 Schriftgröße (font-size)

Beispiel 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.

 

CSS1.0MS IE3.0Netscape 4.0 Schriftgewicht (font-weight)

Beispiel 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.

 

CSS1.0MS IE3.0Netscape 4.0 Schrift allgemein (font)

Beispiel 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.

 

CSS1.0 Wortabstand (word-spacing)

Beispiel 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.

 

CSS1.0MS IE3.0 Zeichenabstand (letter-spacing)

Beispiel 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.

 

CSS1.0MS IE3.0Netscape 4.0 Textdekoration (text-decoration)

Beispiel Anzeigebeispiel: So sieht's aus

Mit dieser Angabe können Sie .

Beispiel (Style-Sheet-Definition im Dateikopf):

strong { text-decoration:underline }

Erläuterung:

Mit text-decoration: können Sie eine Angabe zur Textdekoration definieren. 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.

 

CSS1.0MS IE4.0Netscape4.0 Texttransformation (text-transform)

Beispiel Anzeigebeispiel: So sieht's aus

Mit dieser Angabe können Sie in einem Textbereich Klein- oder Großbuchstaben 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.

 

CSS1.0MS IE3.0Netscape4.0 Textfarbe (color)

Beispiel 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.

 

CSS2.0 Textschatten (text-shadow)

Beispiel 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