Frage stellen
Formatierung der Schrift
Schriftgröße
Die Schriftgröße wird durch die CSS-Eigenschaft font-size gesteuert. Dabei ist es möglich sowohl feste wie auch relative Größenangaben zu definieren. Mögliche Maßeinheiten können dabei sein: Prozent (%), Pixel (px), Punkt (pt) oder em. Prozentangaben beziehen sich auf die vom Browser normalerweise voreingestellte Standardschriftgröße. 200% ist z. B. doppelt so groß, wei es der Browser von sich aus machen würde. Die Angabe Punkt ist aus vielen Textverarbeitungsprogrammen bekannt. Im Web rate ich jedoch davon ab, Schriftgrößenangaben in Punkt zu machen. Das hat folgenden Grund: Die Punktzahl einer Schrift bei einer bestimmten dargestellten Größe ist auch von der Anzahl der Bildpunkte pro Fläche abhängig. Diese ist jedoch je nach verwendeten Betriebssystem unterschiedlich. Linux- und Mac-Systeme verwenden eine Berechnungsgrundlage von 72 dpi, während Windowssysteme 96 dpi als Berechnungsgrundlage für Schriften verwenden. Wer also seine Seiten unter Windows entwickelt, wird überrascht sein wie winzig die Schrift plötzlich auf einem Linuxrechner aussieht. Daher empfehle ich entweder relative Schrifgrößenangaben zu verwenden oder aber die Schriftgröße in Pixel zu bemassen, jedenfalls nicht in Punkt. Auf einem Windowssystem ist ein Punkt 1,3 Pixel. Auf einem Mac-System ist ein Punkt ein Pixel. Die Maßeinheit em ist ebenso wie Prozent eine relative Angabe, die sich auf die normale Schriftgröße bezieht. Wird die Schriftgröße selber in em angegeben, bezieht sich die Angabe auf die Schriftgröße des Elternelementes. Dies kann unter Umständen durch Verschachtelung von Elementen ungewollte Effekte haben (beispielsweise die Schrift wird durch eine weitere Verschachtelung kleiner als gewollt). Das selbe Problem der Verschachtelung besteht bei Prozentangaben. Ein Beispiel für eine Schriftgrößenangabe:
p,div,ol,ul,td,th { font-size:14px; }
p.klein { font-size:10px; }
h2 { font-size:24px; }
In diesem Beispiel werden 3 Schriftgrößen definiert: alle p-, ol-, ul-, div-, td- und th-Elemente erhalten 14 Pixel große Schrift, alle p-Elemente der Klasse klein erhalten 10 Pixel große Schrift und alle h2-Überschriften erhalten 24 Pixel große Schrift. Bitte bedenken Sie: Wenn sie Schriftgrößenangaben fix definieren, können diese nicht mehr durch den Benutzer im Browser verändert werden. Benutzerfreundlicher ist die Definition von relativen Größenangaben, z. B. mit em. Da 1 em bereits relativ groß ist, sind dabei Kommaangaben sinnvoll. Diese werden dabei mit Punkt statt Komma geschrieben, z. B.: font-size:0.8em. Neben diesen Bemaßungen können auch die Angaben x-small, small, medium, large und x-large benutzt werden.
Font
Der Font wird in CSS durch die Eigenschaft font-family definiert. Der Wert von font-family muß eine oder auch mehrere Fontbezeichnungen wie etwa Arial, Times New Roman etc. sein. Mehrere Werte werden dabei durch Komma getrennt. Außerdem gibt es die Möglichkeit Obergruppen anzugeben. Es gibt dabei folgende Obergruppen: Serifenlose Schriften (sans-serif), Serifenschriften (serif), Schreibschrift (coursive), ungewöhnliche Schriften (fantasy) und dicktengleiche Schriften (monospace). Bedenken Sie, das nur Schriften, die auch auf dem System des Anwenders installiert sind angezeigt werden können. Es empfiehlt sich daher nur Schriften die stark verbreitet sind anzugeben als auch eine Obergruppe noch zusätzlich als Alternative anzugeben. Ein Beispiel:
p,div { font-family:Arial,Verdana,sans-serif; }
Obige Angabe bewirkt das alle p- und div-Elemente in der Schriftart Arial dargestellt werden. Ist diese nicht installiert, soll die Schriftart Verdana verwendet werden. Ist diese ebenfalls nicht installiert soll eine beliebige Serifenlose Schrift verwendet werden. Serifen sind die kleinen Endhäckchen die manche Schriften an den Buchstaben haben. Nach Ergonomischen Gesichtspunkten sind übrigens Serifenlose Schriften am Bildschirm besser zu lesen als solche mit. Fontnamen die aus mehreren Teilen bestehen, wie z. B. Times New Roman, sollten in einfache Anführungszeichen gesetzt werden, z. B.:
p { font-family:'Times New Roman',serif; }
Schriftstil
Der Schriftstil meint die Neigung der Schrift, also ob die Schrift normal oder kursiv angezeigt werden soll. Möglich sind die beiden Angaben italic für Kursiv und normal für normal. Die Eigenschaft nennt sich font-style. Ein Beispiel:
p.kursiv { font-style:italic; }
Schriftgewicht
Das Schriftgewicht bezeichnet die Dicke der Buchstaben. Die Eigenschaft nennt sich font-weight. Mögliche Werte sind lighter (dünner), normal (normal), bold (Fett) und bolder (extra Fett). Ein Beispiel:
span.hinweis { font-weight:bold; }.
Farbe
Mit der Eigenschaft color läßt sich die Vordergrundfarbe (also im Allgemeinen die Schriftfarbe) definieren. Erlaubt sind dabei als Wert Hexadezimale Farbwerte, so wie auch in HTML üblich. Z. B. entspricht #FF0000 der Farbe Rot oder #0000FF der Farbe Blau. Ein Beispiel:
h1,h2,h3,h4 { color:#669900; }
In diesem Beispiel werden Überschriften grün eingefärbt.
Textdekoration
Textdekorationen meint Über- und Unterstreichungen des Textes etc. Die entsprechende Eigenschaft nennt sich text-decoration. Dabei können folgende Werte benutzt werden: underline (unterstrichen), overline (überstrichen), line-through (durchgestrichen), blink (blinkend) und none (normal). Der MS Internet Explorer interpretiert die Angabe blink nicht. Ein Beispiel:
a:link { text-decoration:underline; }
a:visited { text-decoration:line-through; }
Obiger Code bewirkt das alle unbenutzten Links unterstrichen angezeigt werden (was bei den meisten Browsern sowieso Voreinstellung ist), während bereits besuchte Links durchgestrichen angezeigt werden.
Zeichenabstand
Mit der Eigenschaft letter-spacing läßt sich der Zeichenabstand bestimmen. Es kann ein nummerischer Wert (allerdings keine Prozentangaben) benutzt werden. Mögliche Maßeinheiten sind mm (Millimeter), pt (Punkt), px (Pixel), em (bezogen auf die Schriftgröße des Elementes) oder ex (bezogen auf die Schrifthöhe eines kleinen Buchstabens x). Kommaangaben sind mit Punkt statt Komma anzugeben. Ein Beispiel:
p { letter-spacing:1px; }