Tutorial zu CSS2 © 04/2002 webnetline.de & topwebhamster.de
Cascading Style Sheets, level 2
4. Schriftformatierung
Unter Schriftarten sind Schriften wie etwa Arial, Helvetica, Times New Roman zu verstehen. Auch Schriftfamilien wie Sans Serif und ähnliche gehören dazu. Ob allerdings die schicke Kunstschrift, die sich so toll bei Ihnen auf der Seite macht, beim Anwender auch angezeigt wird, ist eine andere Frage.
Besitzt der
Anwender nicht die gleiche umfangreiche Schriftensammlung wie Sie
oder hat er die Schrift nicht installiert, bleibt der Befehl
wirkungslos. Mittlerweile gibt es auch dazu Lösungsansätze.
Downloadbare, plattformunabhängige Schriftarten, die zum
Anzeigezeitpunkt aus dem Web zusammen mit den HTML-Dateien zum
Browser übertragen werden, befähigen den Browser, die gewünschte
Schriftart mit allen Eigenschaften darzustellen, auch wenn der
Anwenderrechner diese Schriftart gar nicht kennt.
Listing 11:
<style type="text/css">
h1,h2,h3 { font-familiy:Avantgarde,Arial; }
</style>
Sie können 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 und so weiter. Trennen Sie die
Schriftartennamen durch Kommata. Schriftartennamen, die Leerzeichen
enthalten, müssen Sie in Anführungszeichen setzen.
Die Schriftgröße beeinflussen Sie mit
font-size:. Erlaubt sind numerische Angaben und prozentuale
Werte. Werte kleiner als 100% erzeugen eine kleinere Schrift, Werte
größer als 100% eine größere.
Listing 12:
<style type="text/css">
h1 {font-size:24pt; }
h2 {font-size:80%; }
</style>
Damit enden die Gestaltungsmöglichkeiten von Schriften noch lange
nicht. Probieren Sie auch folgende Variationsmöglichkeiten aus:
<p style="font-style:italic;"> Schriftstil
</p>
Mögliche Werte für den Schriftstil sind: italic (=
kursiv), oblique (= kursiv) und
normal (= normaler Schriftstil).
<p style="font-variant:small-caps;">
Schriftvariante </p>
Mögliche Werte für die Schriftvariante sind: small-caps (=
Kapitälchen), normal (= normale
Schriftvariante).
<p style="font-weight:bold;"> Schriftgewicht
</p>
Mögliche Werte für die Schriftstärke sind: 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.
<p style="font:bold italic 12pt serif Arial;">
zusammenfassende Schriftformatierung </p>
Mit font: können Sie verschiedene
Schriftformatierungen mischen. Erlaubt sind die üblichen Wertangaben
zu den fakultativen Einzelangaben, die in font:
zusammengefasst sind. Das sind font-family:,
font-style:,
font-variant:, font-size:,
font-weight: und
line-height:.
Darüber hinaus existieren weitere Sytle-Sheet-Angaben, die nicht
direkt die Schrift beeinflussen, jedoch eine unterschiedliche
Darstellung bewirken:
<p style="letter-spacing:3em;"> Zeichenabstand
</p>
Mit dieser Angabe können Sie den Abstand zwischen den Buchstaben
beziehungsweise Zeichen im Text bestimmen. Erlaubt ist eine
numerische Angabe. Auch ein prozentualer Wert ist möglich.
<p style="text-decoration:underline;"> Textdekoration </p>
Mögliche Werte für die Textdekoration sind: underline (=
unterstrichen), overline (=
überstrichen), line-through (=
durchgestrichen), blink (= blinkend),
none (= normal, keine Text-Dekoration).
<p style="text-transform:uppercase;">
Texttransformation </p>
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. Mögliche Werte
sind: capitalize (= Wortanfänge als
Großbuchstaben), uppercase (= nur
Großbuchstaben), lowercase (= nur
Kleinbuchstaben), none (= normal, keine
Text-Dekoration).
<p style="color:#CC0000;"> Schriftfarbe </p>
Mit dieser Angabe bestimmen Sie die Textvordergrundfarbe. Mögliche
Werte sind Farbnamen,
Farbworte,
hexadezimale Farbwerte und RGB-Werte.
|
bezahlte Bannerwerbung:
|
|
Jörg Jünemann, Berlin / Ralf Roletschek, Eberswalde
