CSS font-style:italic / kursiv

font-style: italic vs HTML em

Anstelle der CSS-Eigenschaft font-style: italic oder oblique kann HTML em oder i den Text als kursive Schrift bestimmen. Dabei ändert der Wert italic nur den visuellen Charakter, HTML em verleiht dem Text eine inhaltliche Betonung.

italic vs oblique

CSS bietet zwei Optionen: italic und oblique. Dabei soll italic schräg gestellte Schrift nutzen, für die der Schriftdesigner die einzelnen Zeichen aufeinander und auf die Schrägstellung abgestimmt hat. Wenn kein italic-Schnitt vorhanden ist, soll der Browser die Schrift programmatisch schräg stellen – oblique.

Einen Unterschied wird man gar nicht so einfach zu Gesicht bekommen: Wenn ein Italic-Font existiert, wird der Browser den Schnitt sowohl für italic als auch für oblique benutzen. Wir müssten also eine Schrift suchen, für die wir keinen Italic-Font haben und dann den maschinell kursiv gesetzten Text mit dem echten kursiven Schnitt vergleichen.

Wikipedia Oblique type zeigt ein Beispiel für den Unterschied zwischen Italic und Oblique.

p { font-style: normal; }
p { font-style: italic; }
p { font-style: oblique; }
oder
<span style="font-style: normal;">Normal</span>
<span style="font-style: italic;">Italic</span>
<span style="font-style: oblique;">Oblique</span>

Getestet wird ein kursiv gestellter Text innerhalb eines HTML-p-Elements anhand von einigen Wörtern: Dann zeigt sich, ob sich die schräggestellten Begriffe gut vom Fließtext abheben ohne zu start hervorzutreten. Ganze Absätze in kursiver / schräg gestellter Schrift gelten hingegen als »Lesebremse

font-style und @font-face

Bei Schriften, die mit @ font-face als ladbare Schrift eingebunden sind, müssen spezielle italic- und bold-Schnitte ebenfalls geladen werden, damit der Browser kursiven Text nicht digital schrägstellt und den Fettschnitt nicht selbst bastelt.

/* arsenal-regular - latin */
@font-face {
  font-family: 'Arsenal';
  font-style: normal;
  font-weight: 400;
  src: local('Arsenal Regular'), local('Arsenal-Regular'),
       url('fonts/arsenal/arsenal-v2-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/arsenal/arsenal-v2-latin-regular.woff') format('woff'), /* Modern Browsers */
}
/* arsenal-italic - latin */
@font-face {
  font-family: 'Arsenal';
  font-style: italic;
  font-weight: 400;
  src: local('Arsenal Italic'), local('Arsenal-Italic'),
       url('fonts/arsenal/arsenal-v2-latin-italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/arsenal/arsenal-v2-latin-italic.woff') format('woff'), /* Modern Browsers */
}

Den Unterschied zwischen dem originalen Italic-Schnitt und dem schräggestellten Text erkennt man z.B. schnell am a und am e.

Werte für font-style

normal

ist die Voreinstellung und stellt die Zeichen aufrecht dar. Die Angabe normal stellt sicher, dass vorangegangene Deklarationen den Schriftstil nicht beeinflussen.

italic

stellt die Schrift in einem kursiven Schnitt dar. Wenn kein Kursivschnitt (italic) auf dem Zielrechner installiert ist, benutzt der Browser oblique.

oblique

veranlasst den Browser, die Buchstaben schräg darzustellen, um einen Kursivschnitt nachzuahmen.

font-style umfasst nur normal, italic bzw. oblique. Daneben gibt weitere CSS-Eigenschaften für Schriftstile wie text-transform (Umwandlung in Großbuchstaben oder Versalien), font-variant für Kapitälchen (erster Buchstabe eines Worts in kleinen Großbuchstaben).