Schriftstil mit font-style festlegen

Früher wurde für Texte, die kursiv dargestellt werden sollten, meistens der HTML-Tag <i>...</i> verwendet. Die Verwendung des I-Tags zu diesem Zwecke ist jedoch missbilligt, da hierbei das Design und der Content nicht voneinander getrennt werden. Das ist auch nicht notwendig, da man kursive Schriftstile bequem in CSS vorgeben kann.

Kursiver Text mit CSS

Um für die Texte einen Schriftstil festzulegen, kann man in CSS die Eigenschaft font-style verwenden. Nachfolgend ist eine Abbildung mit einem Beispielcode, mit dem die Texte des betreffenden Elements kursiv dargestellt werden.

CSS-Code mit font-style

Werte für font-style

Für font-style gibt es nur einige wenige Werte, die angegeben werden können.

  • normal (Standard, normaler Schriftstil)
  • italic (Für kursive Schrift)
  • oblique (Für schräg gesetzte Schrift)
  • initial (Setzt auf den Standardwert)
  • inherit (Vererbt vom Elternelement)

Nachfolgend ist ein Beispielcode sowie die Abbildung von der Darstellung im Browser.

.selektor1 {
font-style: italic;
}

.selektor2 {
font-style: oblique;
}
<p class="selektor1">Text mit font-style: italic</p>
<p class="selektor2">Text mit font-style: oblique</p>
font-style: kursiv und oblique

Aus der Abbildung ist ersichtlich, dass die beiden Werte identische Ergebnisse liefern. Trotzdem gibt es zwischen den beiden Werten einen Unterschied. Mit italic wird der kursive Stil angesprochen, der bereits mit der Schriftart des Systems enthalten ist. Mit oblique wird der Text nachträglich vom Browser schräg gestellt. In der Darstellung sind sie aber in der Regel identisch.