CSS, HTML und Javascript mit {stil}

CSS font-style:italic / kursiv

Schräger Text: Kursiv oder italic

Der Schriftschnitt italic, auch als »kursiv« bezeichnet, hebt Begriffe, wörtliche Rede oder ganze Sätze im Fließtext hervor. Kursiv gesetzte Texte springen weniger hervor als fett gesetzte Schriften.

Eine Faustregel für den Einsatz von kursiver Schrift lautet: Was wir auf dem Papier unterstreichen würden.

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.

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

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 als eine Schrift suchen, für die wir keinen Italic-Font haben und dann den maschinell kursiv gesetzten Text mit dem echten kursive 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>

font-style und @font-face

Bei Schriften, die mit @font-face oder Webfont 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.

@font-face {
    font-family: 'pt_sansregular';
    src: url('pts55f-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'pt_sansitalic';
    src: url('pts56f-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

p.textbox { font-family: 'Fira Sans', sans-serif;}
p.textbox span { font-style: italic}
p.fontbox { font-family: 'pt_sansregular'; }
p.fontbox span { font-style: italic }

Im Comic »Die Zigarren des Pharaos« erleben Tim und Struppi ein neues Abenteuer.

Im Comic »Die Zigarren des Pharaos« erleben Tim und Struppi ein neues Abenteuer.

Erster Text: Google Webfont Fira
Zweiter Text: Fontsquirrel PT sans

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.
Sei Italic sei bold oder einfach normal