CSS font-style – Referenz, Beispiel und Labor

stylesheet.css · font-style

.probe {
  font-style: italic;
}

Der Webautor schreibt einen Absatz, der Browser setzt ihn nach den Regeln des Stylesheets. Groß- und Kleinschreibung, Abstand, Farbe und Schnitt hängen an genau einer Eigenschaft.

berechneter Wertfont-style: italic

Box-Breite–

Box-Höhe–

Erläuterungen

Schriftarten,
oben: normal,
mitte: oblique,
unten: italic.
Verwendet: *Lucida Sans*

Die Eigenschaft font-style ist ein Teil der Kurzschrift- Eigenschaft font. Sie wählt zwischen senkrechter Schriftart und schräger Schriftart einer Schriftfamilie.

Die Schriftarten Italic und Oblique sehen sich sehr ähnlich, sind aber nicht gleich. Der Unterschied liegt in ihrer Entstehungsweise: die Italic- und Roman-Formen einer Schriftfamilie werden unabhängig voneinander entworfen. Oblique dagegen ist in der Regel einfach eine verschränkte Form der regulären (Roman-)Schriftart.

Sollte einmal die Schriftart Italic nicht vorhanden sein, wird sie vom Browser durch die Form Oblique ersetzt, falls diese vorhanden ist.

Eine umgekehrte Bestimmung gibt es in der Spezifikation nicht: ein Browser ist nicht gezwungen, auf die Schriftart Italic auszuweichen, sollte einmal die Schriftart Oblique deklariert und nicht vorhanden sein. Das kann zu dieser Situation führen: deklariert man oblique, aber die gewünschte Schriftfamilie enthält nur die Schriftart Italic, dann darf der Browser zuerst in der nächsten Schriftfamilie der gegebenen Deklaration prüfen, ob dort Oblique enthalten ist. Der als Oblique deklarierte Textteil kann daher theoretisch in einer ganz anderen Schriftart ausgegeben werden.

In der Praxis sieht es aber so aus, dass alle modernen Browser in diesem Fall ganz einfach die Schriftart Italic einsetzen.

Erlaubte Werte

Auszug aus der Spezifikation (die verwendete Syntax wird im Artikel CSS-Wertesyntax genauer erläutert):

'font-style'
normal | italic | oblique | inherit

Tipp:

Es ist vorteilhaft, anstelle der einzelnen Eigenschaften wann immer möglich die entsprechenden Kurzschrift- Eigenschaften zu verwenden. Dadurch werden die notierten Regeln übersichtlicher und kompakter. Man sollte dabei aber im Hinterkopf behalten, dass alle nicht deklarierten einzelnen Eigenschaften auf ihre Ausgangswerte zurückgesetzt werden.

normal (Ausgangswert): Normale oder senkrechte Schrift, oft mit der Bezeichnung 'Roman' oder 'Upright' im Namen versehen.
italic: Schrägschriften, die oft die Bezeichnung 'Italic', 'Cursive' oder 'Kursiv' im Namen tragen, werden in der Font-Datenbank des Browsers mit dem Etikett Italic versehen.
oblique: Schriftarten, die vom Browser mit Oblique bezeichnet werden, haben typischerweise die Bezeichnungen 'oblique', 'slanted' oder 'incline'.
inherit: Bestimmt explizit, dass diese Eigenschaft denselben berechneten Wert wie im Elternelement annimmt.

Code-Beispiel

P.bildunterschrift { font-style: italic; }

Browserunterstützung

Die Eigenschaft font-style wird von allen modernen Browsern unterstützt, mit folgender Einschränkung:

IE/win 5.x, IE/Win 6, IE 7: IE/Win erkennt den Wert inherit nicht.
Alle Browser: Die Behandlung des Wertes oblique entspricht nicht 100%-ig den Vorgaben der Spezifikation. Die modernen Browser verwenden die Schriftart italic derselben Schriftfamilie, wenn die Schriftart oblique deklariert, aber nicht vorhanden ist.

Eric Meyer's CSS2 Test Suite zeigt am praktischen Beispiel, wie die Browser mit dieser Eigenschaft umgehen.

Keine Eigenschaft und kein Selektor stehen in einem Stylesheet für sich allein. In der Praxis kann das Zusammenspiel zwischen verschiedenen Elementen und Selektoren einen nicht zu unterschätzenden Einfluss auf die Fähigkeiten der Browser haben. Bugs treten oft erst durch das Zusammenwirken mehrerer Eigenschaften an unterschiedlichen Elementen auf.

Wechselwirkungen

font, font-variant, font-weight, font-size, line-height, font-family

Kursiv und schräg gestellt

Die Seite beschreibt den Unterschied über die Entstehung, und er ist mit bloßem Auge zu sehen. Eine kursive Schrift ist eine eigene Zeichnung: die Buchstaben haben andere Formen, oft mit Anschlüssen aus der Handschrift, und das kleine a verliert seinen Bogen. Eine schräg gestellte Schrift ist dieselbe Zeichnung, geneigt.

Serifenschriften haben üblicherweise eine echte Kursive, serifenlose oft nur eine geneigte Form. Das ist historisch begründet: die Kursive stammt aus einer eigenen Schreibtradition, die für serifenlose Schriften keine Entsprechung hat.

In der Praxis führt das dazu, dass die Unterscheidung im Stylesheet selten ankommt. Fordert man die geneigte Form und die Familie hat nur eine kursive, wird die kursive verwendet, und umgekehrt. Das Anwenderprogramm nimmt, was da ist.

Wenn keine der beiden Formen vorhanden ist

Fehlt beides, darf das Anwenderprogramm die Schrägstellung selbst berechnen. Das Ergebnis ist an den Rundungen erkennbar, die dabei verzerrt werden, und an den senkrechten Strichen, die ihre Strichstärke ändern.

Bei Schriften, die mit dem Dokument ausgeliefert werden, entsteht daraus eine bekannte Falle: Wird nur der aufrechte Schnitt eingebunden und im Stylesheet trotzdem kursiv ausgezeichnet, erzeugt der Browser die Schrägstellung selbst, obwohl ein echter Schnitt der Familie existiert. Sichtbar ist nur eine etwas unsaubere Kursive, und die Ursache liegt in der Einbindung der Schrift, nicht im Stylesheet.

Umgekehrt ist die Deklaration der aufrechten Form nötiger, als sie aussieht. In Elementen, die von Haus aus kursiv dargestellt werden, ist sie der Weg zurück zur aufrechten Schrift, etwa für einen Werktitel innerhalb eines ohnehin kursiven Zitats.

Besonderheiten im Medientyp `handheld`

Diese Eigenschaft ist Teil des Standards CSS Mobile Profile 1.0 und unterliegt damit auch in Mobilgeräten allen relevanten Regeln aus CSS 2.1.

Die Ausgabe von Text in Mobilgeräten erfolgt ohne Textglättung und in relativ kleiner Schriftgröße. Deshalb werden als kursiv deklarierte Schriftarten in fast allen Mobilgeräten durch senkrechte Fettschrift ersetzt.

Weitere Charakteristika

Die Stylesheet-Schnellreferenz mit einer Zusammenfassung aller visuellen Eigenschaften kann auch als PDF-Datei herunter geladen werden.

Ausgangswert: normal
Berechneter Wert: Spezifizierter Wert
Vererbung: Ja
Anwendbarkeit: Auf alle Elemente
%-Bezugswert: Nicht zutreffend
Mediengruppe(n): Visual

Verwendete Standards

Dieser CSS-Referenz liegen folgende Spezifikationen zugrunde: CSS 1, CSS 2.1 CR und CSS Mobile.