Geschrieben von robin am 19.04.2004, 21:09

Schriftformatierungen mit CSS
__________________________

00 Schriftformatierung im Allgemeinen
01 Schriftart font-family
02 Schriftstil font-style
03 Schriftvariante font-variant
04 Schriftgröße font-size
05 Schriftgewicht font-weight
06 Schriftlaufweite font-stretch
07 Schrift allgemein font
08 Wortabstand word-spacing
09 Zeichenabstand letter-spacing
10 Textdekoration text-decoration
11 Texttransformation text-transform
12 Textfarbe color
13 Textschatten text-shadow

00 Schriftformatierung im Allgemeinen
Mit diesen Angaben lassen sich alle Elemente formatieren, welche Text enthalten.

01 font-family
Schriftarten kennt ihr alle - Times New Roman, Arial, etc.
Man unterscheidet in Schriftarten mit und ohne Serifen. Für Bildschirmausgaben empfehlen sich für die bessere Lesbarkeit die serifenlosen, also Arial, Verdana, etc. (Die mit Serifen haben diese Haken an den Buchstaben und das sieht auf nem Monitor doof aus - auf Papier wiederum sind die besser, weil sie da das Auge führen.)
Ich solltet bei der Wahl der Schriftart auch beachten, dass ihr sicher sein könnt, dass sie nahezu alle Leute aufm Rechner haben, sonst kann der Text nicht so wie ihr euch das vorstellt angezeigt werden.

eine Möglichkeit zum Formatieren ist der <span>-Tag:
<p><span style="font-family:'Times New Roman',serif">Beispieltext 1 Serifen</span><br>
<span style="font-family:Verdana">Beispieltext 2 Serifenlos</span>

Man kann auch mehrer Angaben für die Formatierung machen, quasi als Abstufung, falls der Nutzer die Schriftart nicht hat. Das Ganze wird durch Komma getrennt.
Bsp: font-family:Verdana,arial,sans-serif;
Schriftnamen mit Leerzeichen setzt ihr am besten in Hochkommas - "Times New Roman". Wenn das ganze im HTML-Tag stehen soll und somit schon Hochkommas vorhanden sind nutzt die einfachen - 'Times New Roman'.

Es gibt folgende vordefinierte Schriftfamilien (keine Schriftnamen):
serif = mit Serifen (Times New Roman)
sans-serif = ohne Serifen (Arial)
cursive = für Schreibschrift (Script)
fantasy = für ungewöhnliche Schrift (Windings)
monospace = mit dicktengleichen Zeichen (Courir New)
Am besten also immer eine Schriftfamilienangabe machen.

02 font-style
Der "Style" ist die Schriftneigung also kursiv oder nicht kursiv.

Werte:
italic = kursiv
oblique = kursiv
normal = normaler

Beispiel:
<style type="text/css">
a {font-style:italic;}
</style>

03 font-variant
Käpitälchen oder Normal

Werte:
small-caps = Kapitälchen
normal = normal

Beispiel:
<span style="font-variant:normal">Beispiel normal</span><br>
<span style="font-variant:small-caps">Beispiel small-caps</span></p>

04 font-size
Darstellungsgröße der Schrift

Werte:
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
nummerischer Wert in px, pt, cm, % etc.

Beispiel:
<span style="font-size:6pt">Beispiel Schriftgr&ouml;&szlig;e 6pt</span>

Die Angabe ist mit der Zeilehöhe kombinierbar: h4{font:10pt/13pt;} (10pt Schriftgröße, 13pt Zeilenhöhe).


05 font-weight
Dicke und Stärke einer Schrift

Werte:
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

Beispiel:
<span style="font-weight:bold">Beispiel 1</span>
<span style="font-weight:100">Beispiel 2</span>

Bei numerischen Werten entspricht 500 dem im DTP-Bereich üblichen Begriff medium und 700 dem Begriff bold.
Kaum eine Schriftart unterstützt alle Werte.

06 font-stretch
Wie schmal oder breit eine Schrift erscheint.

Werte:
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

Beispiel:
<span style="font-stretch:wider">Beispiel 1</span><br>
<span style="font-stretch:narrower">Beispiel 2</span>

Diese Eigenschaft wird von den verbreiteten Browsern noch nicht interpretiert.


07 font
Zusammenfassung folgender Einzelangaben:
font-family, font-style, font-variant, font-size, font-weight, line-height

Beispiel:
h3 { font:bold 12pt Times; }
h2 { font:italic 1cm Helvetica; }
h1 { font:small-caps 14pt Verdana; }

Ihr könnt als verschiedene Schriftformatierungen mischen. Die Reihenfolge der Angaben ist Wurst, ihr müsst nur die üblichen Wertangaben nutzen.

08 word-spacing
Abstand zwischen Wörtern im Text

Beispiel:
<span style="word-spacing:6pt">Beispiel Wortabstand 6pt</span>

nummerische Angaben aber keine Prozentangaben
wird noch nicht von allen Browsern interpretiert

09 letter-spacing
Abstand zwischen Buchstaben bzw. Zeichen im Text

Beispiel:
<span style="letter-spacing:2pt">Beispiel Zeichenabstand 2pt</span>

nummerische Angaben aber keine Prozentangaben
wird noch nicht von Netscape 4.x interpretiert


10 text-decoration
zusätzliche Textformatierungen - unterstrichenen/ durchgestrichenen

Werte:
underline = unterstrichen
overline = überstrichen
line-through = durchgestrichen
blink = blinkend
none = normal (keine Dekoration)

Beispiel:
a:link {text-decoration:none;}
a:visited {text-decoration:line-through;}
a:hover {text-decoration:underline;}
a:active {text-decoration:underline,overline;}
Internet Explorer interpretiert blink nicht
Netscape 4.x interpretiert overline noch nicht - Netscape 6.x schon

11 text-transform
in einem Textbereich Klein- oder Großbuchstaben oder Kapitälchen erzwingen

Werte:
capitalize = Wortanfänge als Großbuchstaben
uppercase = Nur Großbuchstaben
lowercase = Nur Kleinbuchstaben
none = normal (keine Transformation)

Beispiel:
<span style="text-transform:capitalize">Texttransformation capitalize</span>
Internet Explorer 4.x interpretiert capitalize noch nicht

12 color
Textvordergrundfarbe bzw. Schriftfarbe bestimmen

Werte:
Farbnamen red
Hexadezimalwerte #FF0000

Beispiel:
<span style="color:blue">Beispiel</span>

13 text-shadow
Schatteneffekt erzeugen

Werte:
Farbangaben
none

Beispiel:
#rotschattig { text-shadow:black; font-size:36pt; color:red; }
#blauschattig { text-shadow:black; font-size:36pt; color:blue; }
<p id="rotschattig">Text mit schwarzem Schatten</p>
<p id="blauschattig">Text mit schwarzem Schatten</p>
wird bislang von keinem der verbreiteten Browser interpretiert (CSS 2.0)

Bewertung Anzahl
6
100,0 %
4 Bewertungen