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öß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)