css-café

2. Schrift

• 2.1 font-size
• 2.2 font-family
• 2.3 font-weight
• 2.4 font-style
• 2.5 font-variant
• 2.6 font (Kurzform)
• 2.7 font-size-adjust (entfernt in 2.1)
• 2.8 font-stretch (entfernt in 2.1)

Schriftformatierungen gehören bereits seit CSS 1 zum Standard und werden von den meisten modernen Browsern großzügig unterstützt.

Es empfiehlt sich, Schriftformatierungen sehr früh in der Elementhierarchie anzulegen, da sie alle vererbt werden.

2.1 font-size

Bestimmt die Schriftgröße von Texten innerhalb eines Elements [CSS1].

Beispiel:
h1 {font-size: 200%;}

Werte	Längenangabe | Prozentwert | xx-small | x-small | small | medium | large | x-large | xx-large | smaller | larger | inherit
Default	medium
Vererbt	ja

Absolute Längenangaben und Pixel

(px, cm, mm, in, pt, pc)
Diese Werte sollten vermieden werden, da sie keine Rücksicht auf eventuelle Voreinstellungen des Benutzers nehmen. Auch die Angabe von Pixel-Größen lässt sich im IE/win vom Anwender nicht verändern.

Relative Längenangaben und Prozent

(em, ex, %)
Relative Angaben beziehen sich immer auf die zugewiesene Schriftgröße des übergeordneten Elements. 1em entspricht 100% (bezogen auf die im Browser eingestellte Basisschriftgröße). Beachten Sie, dass Zwischenwerte wie 0.75em oder 75% für die Darstellung (errechnete volle Pixel) auf- oder abgerundet werden müssen.

Schlüsselwörter

(xx-small, x-small, small, medium, large, x-large, xx-large)
Theoretisch kann man mit der Verwendung von Schlüsselwörtern eine unerwünschte Vererbung auf Kindelemente verhindern, wie zum Beispiel die immer kleiner werdenden Schriften in einer verschachtelten Liste. In der Praxis muss man feststellen, dass die Vorgaben zur Umsetzung der einzelnen Stufen von Browser zu Browser unterschiedlich gehandhabt werden und daher nicht wirklich praxistauglich sind.

Schlüsselwörter für relative Angaben

(smaller, larger)
Die Schrift wird um jeweils eine Stufe, entsprechend den normalen Schlüsselwörtern) vergrößert oder verkleinert. Dabei können diese Angaben über xx-small bzw. xx-large hinausgehen.

^ nach oben

2.2 font-family

Weist dem Text eines Elements eine Schriftart zu [CSS1].

Beispiel:
h1 {font-family: ‚Trebuchet MS', Arial, Helvetica, sans-serif;}

Werte	Schriftfamilie | generische Schriftfamilie | inherit
Default	abhängig von Voreinstellungen
Vererbt	ja

In einer kommagetrennten Liste können mehrere alternative Schriftfamilien angeführt werden. Die erste Schriftfamilie, die auf dem Zielrechner zur Verfügung steht, wird umgesetzt. Schließen Sie den Schriftnamen in Anführungszeichen ein, wenn er Leer- oder Sonderzeichen enthält. Als letzten Eintrag einer Schriftartenliste sollten Sie immer eine generische Schriftfamilie definieren.

Generische Schriftfamilien

Zusätzlich zu spezifischen Schriftfamilien können Sie auch eine generische angeben. Dafür kennt CSS fünf Schlüsselwörter:

• serif – für Serifenschriften wie „Times New Roman”;
• sans-serif – für serifenlose Schriften wie Arial oder Verdana;
• monospace – Schriften mit fester Breite (ein i benötigt den gleichen Platz wie ein m) wie Courier;
• cursive – bezeichnet handschriftenähnliche Schriftarten wie President;
• fantasy – fantasievolle Schmuckschriftarten wie „Comic Sans MS”.

Mit cursive und fantasy sollten Sie sehr vorsichtig sein, da sich kaum vorhersehen lässt, was auf dem Zielrechner angezeigt wird.

^ nach oben

2.3 font-weight

Bestimmt Dicke und Stärke (Schriftgewicht) der Schrift [CSS1].

Beispiel:
p.wichtig {font-weight: bold;}

Werte	100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | normal | bold | bolder | lighter | inherit
Default	normal
Vererbt	ja

Praktischen Nährwert haben hier nur die Schlüsselwörter normal (=400) und bold (=700). Alle anderen Werte erlauben zwar theoretisch eine sehr feine Abstufung des Fettungsgrads, doch werden diese Feinheiten von kaum einer bekannten Web-Schriftart unterstützt, ganz abgesehen davon, dass die notwendigen Informationen dem Browser wohl höchst selten zur Verfügung stehen.

^ nach oben

2.4 font-style

Schriftstil bestimmt die Neigung der Schrift [CSS1].

Beispiel:
span.zitieren {font-style: italic;}

Werte	normal | italic | oblique | inherit
Default	normal
Vererbt	ja

Kaum ein Browser kennt den Unterschied zwischen italic (kursiv) und oblique (schräggestellt). Oblique soll eigentlich verwendet werden, wenn eine Schriftart nicht über den Schriftschnitt italic verfügt.

^ nach oben

2.5 font-variant

Ermöglicht eine Schriftdarstellung mit Kapitälchen [CSS1].

Beispiel:
h4 {font-variant: small-caps;}

Werte	normal | small-caps | inherit
Default	normal
Vererbt	ja

Bitte beachten Sie, dass es sich hier in der Regel um Pseudo-Kapitälchen handelt, da die meisten Browser lediglich verkleinerte Großbuchstaben verwenden.

^ nach oben

2.6 font (Kurzform)

Ermöglicht das Zusammenfassen mehrerer Schriftformatierungen [CSS1].

Beispiel:
#footer {font: 90% bold Arial, sans-serif;}

Werte	font-style | font-variant | font-weight | font-size/line-height | font-family | inherit | caption | icon | menu | message-box | small-caption | status-bar [CSS2]
Default	siehe einzelne Eigenschaften
Vererbt	ja

Die Werte für font-size und font-family müssen auf jeden Fall angegeben werden, da ansonsten die gesamte Anweisung ungültig ist und nicht interpretiert wird (Ausnahme: IE 5x/win). Nicht definierte Einzelwerte werden durch den Defaultwert der Eigenschaft ersetzt.

Eine Besonderheit hier ist die gemeinsame (optionale) Angabe von Schriftgröße und Zeilenhöhe. Diese beiden Werte werden (nur bei gemeinsamer Angabe) durch einen Schrägstrich getrennt:

Beispiel:
#footer {font: 90%/1.5;}

Die aufgeführten Schlüsselwörter wurden erst mit CSS2 eingeführt und beziehen sich auf Systemeinstellungen des Anwenders. In aktuellen Browsern werden sie noch kaum unterstützt.

• caption – Schriftart für Ausklappfelder, Buttons und Ähnliches;
• icon – zur Bezeichnung von Icons;
• menu – für Menüs;
• message-box – Schriftart für Dialogboxen;
• small-caption – zur Beschriftung kleiner Elemente;
• status-bar – für Texte in Statusleisten.

^ nach oben

2.7 font-size-adjust

Ermöglicht den Ausgleich von x-Höhen verschiedener Schriftarten [nur CSS2].

Diese Eigenschaft wurde mit der CSS2.1-Spezifikation wieder entfernt.

^ nach oben

2.8 font-stretch

Ermöglicht die Auswahl eines normalen, komprimierten oder gedehnten Schriftschnittes aus einer Schriftfamilie [nur CSS2].

Diese Eigenschaft wurde mit der CSS2.1-Spezifikation wieder entfernt.