SELFHTML

Schriftformatierung

Informationsseite

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

 nach unten 

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 Kapitel Absatztypen und Text beschrieben werden, aber auch beispielsweise Elemente für Kapitel Tabellen. Auch auf das body-Element lassen sich die hier aufgelisteten Style-Sheet-Angaben anwenden - in diesem Fall gelten die Angaben für alle Textelemente der HTML-Datei.

 nach obennach unten 

CSS 1.0Netscape 4.0MS IE 3.0 font-family (Schriftart)

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

Bei der hier beschriebenen Eigenschaft 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 Seite Schriftformatierung mit Schriftartendatei beschrieben.

Beispiel:

Popup-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>font-family</title>
<body bgcolor="#FFFFFF" text="#000000">

<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-familiy:"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.

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 die gewünschte nicht angezeigt werden kann.

 nach obennach unten 

CSS 1.0Netscape 4.0MS IE 3.0 font-style (Schriftstil)

Schriftstil bedeutet die Neigung der Schrift.

Beispiel:

Popup-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>font-style</title>
<style type="text/css">
.kursiv { font-style:italic; }
.grosskursiv { font-style:italic; font-size:200%; }
</style>
<body bgcolor="#FFFFFF" text="#000000">

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

</body></html>

Erläuterung:

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.

 nach obennach unten 

CSS 1.0MS IE 4.0 font-variant (Schriftvariante)

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

Beispiel:

Popup-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>font-variant</title></head>
<body bgcolor="#FFFFFF" text="#000000">

<p><span style="font-variant:normal">kleiner Beispieltext
mit Schriftvariante normal</span><br>
<span style="font-variant:normal; font-size:200%">gro&szlig;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 scmall-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.

 nach obennach unten 

CSS 1.0Netscape 4.0MS IE 3.0 font-size (Schriftgröße)

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

Beispiel:

Popup-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>font-size</title></head>
<body bgcolor="#FFFFFF" text="#000000">
<p>
<span style="font-size:6pt">Beispieltext mit Schriftgr&ouml;&szlig;e 6pt</span><br>
<!-- usw. -->
</p></body></html>

Erläuterung:

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

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 Seite Zeilenhöhe kombinieren, indem Sie beide Angaben innerhalb der Eigenschaft nach unten font mit der folgenden Syntax notieren (Beispiel): p { font:12pt/14pt }. In dem Beispiel ist 12pt die Schriftgröße und 14pt die Zeilenhöhe. Bei dieser Notationsweise bezeichnet die Zahl vor dem Schrägstrich stets die Schriftgröße und die Zahl hinter dem Schrägstrich stets die Zeilenhöhe.

 nach obennach unten 

CSS 1.0Netscape 4.0MS IE 3.0 font-weight (Schriftgewicht)

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

Beispiel:

Popup-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>font-weight</title>
</head><body bgcolor="#FFFFFF" text="#000000">

<p><span style="font-weight:bold">kleiner Beispieltext
mit Schriftgewicht bold</span><br>
<span style="font-weight:bold; font-size:200%">gro&szlig;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&szlig;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 = 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.

 nach obennach unten 

CSS 2.0 font-stretch (Schriftlaufweite)

Die Schriftlaufweite gibt an, wie schmal oder breit eine Schrift erscheint.

Beispiel:

Popup-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>font-stretch</title>
</head><body bgcolor="#FFFFFF" text="#000000">

<p><span style="font-stretch:wider">kleiner Beispieltext mit Laufweite wider</span><br>
<span style="font-stretch:wider; font-size:200%">gro&szlig;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&szlig;er Beispieltext
mit Laufweite narrower</span></p>

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

Erläuterung:

Mit font-stretch: können Sie die Laufweite der Schrift bestimmen. Folgende Angaben sind möglich:

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.

Beachten Sie:

Diese Eigenschaft wird von den verbreiteten Browsern noch nicht interpretiert.

 nach obennach unten 

CSS 1.0Netscape 4.0MS IE 3.0 font (Schrift allgemein)

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

Beispiel:

Popup-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>font</title>
<style type="text/css">
#Text01 { font:bold 12pt Times; }
#Text02 { font:italic 1cm Helvetica; }
#Text03 { font:small-caps 14pt Verdana; }
</style>
<body bgcolor="#FFFFFF" text="#000000">

<p id="Text01">Beispieltext mit Schrift: bold 12pt Times</p>
<p id="Text02">Beispieltext mit Schrift: italic 1cm Helvetica</p>
<p id="Text03">Beispieltext mit Schrift: small-caps 14pt Verdana</p>

</body></html>

Erläuterung:

Mit font: können Sie verschiedene Schriftformatierungen mischen. Erlaubt sind die üblichen Wertangaben zu den erlaubten Eigenschaften, die in font: zusammengefasst sind. Die Reihenfolge der Angaben ist egal.

 nach obennach unten 

CSS 1.0Netscape 6.0 word-spacing (Wortabstand)

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

Beispiel:

Popup-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>word-spacing</title>
</head><body bgcolor="#FFFFFF" text="#000000">
<p>
<span style="word-spacing:6pt">Beispieltext mit Wortabstand 6pt</span><br>
<span style="word-spacing:8pt">Beispieltext mit Wortabstand 8pt</span><br>
<!--usw.-->
</p>
</body></html>

Erläuterung:

Mit word-spacing: können Sie die Wortabstand bestimmen. Erlaubt ist eine Seite numerische Angabe, jedoch keine Prozentangaben.

Beachten Sie:

Diese Angabe wird noch nicht von allen Browsern interpretiert.

 nach obennach unten 

CSS 1.0MS IE 3.0Netscape 6.0 letter-spacing (Zeichenabstand)

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

Beispiel:

Popup-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>letter-spacing</title>
</head><body bgcolor="#FFFFFF" text="#000000">
<p>
<span style="letter-spacing:1pt">Beispieltext mit Zeichenabstand 1pt</span><br>
<span style="letter-spacing:2pt">Beispieltext mit Zeichenabstand 2pt</span><br>
<!--usw.-->
</p>
</body></html>

Erläuterung:

Mit letter-spacing: können Sie die Schriftgröße bestimmen. Erlaubt ist eine Seite numerische Angabe, jedoch keine Prozentangaben.

Beachten Sie:

Diese Angabe wird von Netscape 4.x noch nicht interpretiert.

 nach obennach unten 

CSS 1.0Netscape 4.0MS IE 3.0 text-decoration (Textdekoration)

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

Beispiel:

Popup-Seite Anzeigebeispiel: So sieht's aus

<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; }
</style>
</head><body bgcolor="#FFFFFF" text="#000000">

<p>
Sie kennen sicher die <a href="../../../index.htm">Einstiegsseite zu SELFHTML</a><br>
Aber kennen Sie auch die <a href="../../../cgiperl/module/cpanmodule.htm">CPAN-Module</a>?<br>
Oder die <a href="../../../diverses/sprachenkuerzel.htm">Sprachenk&uuml;rzel</a>?
</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:

Der MS Internet Explorer interpretiert die Angabe blink nicht. Netscape 4.x interpretiert die Angabe overline noch nicht, Netscape 6.x jedoch schon.

 nach obennach unten 

CSS 1.0Netscape 4.0MS IE 3.0 text-transform (Texttransformation)

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:

Popup-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>text-transform</title>
</head><body bgcolor="#FFFFFF" text="#000000">

<p><span style="text-transform:capitalize">kleiner Beispieltext
mit Texttransformation capitalize</span><br>
<span style="text-transform:capitalize; font-size:200%">gro&szlig;er Beispieltext
mit Texttransformation 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 MS Internet Explorer 4.x interpretiert die Angabe capitalize noch nicht.

 nach obennach unten 

CSS 1.0Netscape 4.0MS IE 3.0 color (Textfarbe)

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

Beispiel:

Popup-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>color</title>
</head><body bgcolor="#FFFFFF" text="#000000">

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

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

Erläuterung:

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

Tip:

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

 nach obennach unten 

CSS 2.0 text-shadow (Textschatten)

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

Beispiel:

Popup-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>text-shadow</title>
<style type="text/css">
#rotschattig  { text-shadow:black; font-size:36pt; color:red; }
#blauschattig { text-shadow:black; font-size:36pt; color:blue; }
</style>
</head><body bgcolor="#FFFFFF" text="#000000">

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

</body></html>

Erläuterung:

Mit text-shadow: können Sie einen Textschatten erzwingen. Erlaubt sind Seite 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 bislang von keinem der verbreiteten Browser interpretiert.

 nach oben
weiter Seite Schriftformatierung mit Schriftartendatei
zurück Seite Maßeinheiten, Farbangaben und Wertzuweisung
 

© 2001 E-Mail selfhtml@teamone.de