font-style

Die CSS-Eigenschaft font-style legt fest, ob Text mit einem kursiven Schnitt der gewählten Schriftfamilie (font-family) dargestellt werden soll.

Syntax

font-style: normal;
font-style: italic;
font-style: oblique;
font-style: oblique 10deg;

/* Global values */
font-style: inherit;
font-style: initial;
font-style: unset;

font-style akzeptiert ein einzelnes der nachfolgenden Schlüsselwörter, welchem im Falle von oblique ein Winkel folgen darf.

Werte

normal
Wählt einen Schriftschnitt mit nicht-kursiven Buchstaben.
italic
Wählt einen kursiven Schriftschnitt der Eigenschaft italic (siehe unten). Steht keiner zur Verfügung, wird stattdessen der Wert oblique angewendet. Ist auch dies nicht möglich, wird die Schrägstellung von 14° durch den Browser erzeugt.
oblique
Wählt einen kursiven Schriftschnitt der Eigenschaft oblique (siehe unten). Steht keiner zur Verfügung, wird stattdessen der Wert italic angewendet. Ist auch dies nicht möglich, wird eine Schrägstellung von 14° durch den Browser erzeugt.
oblique <angle>
Wählt einen kursiven Schriftschnitt der Eigenschaft oblique (siehe unten), dessen Buchstaben genau oder annähernd im Winkel <angle> schräggestellt sind. Üblicherweise werden bei der Suche nach passenden Schriftschnitten für Winkel ab 14° eher größere Werte gewählt, bis 13° eher kleinere (Details siehe font matching section).
Steht kein passender Schriftschnitt zur Verfügung, wird die Schrägstellung durch den Computer aus einem normalen Schriftschnitt erzeugt.
Der gültige Winkelbereich erstreckt sich von -90deg bis 90deg (einschließlich). Positive Werte bewirken eine Schrägstellung in Richtung Zeilenende, negative in Richtung Zeilenanfang.

italic gegenüber oblique

Die Werte italic und oblique scheinen auf den ersten Blick bei der Darstellung oftmals zu identischen Ergebnissen zu führen.

Während italic jedoch Schriftschnitte bezeichnet, die bereits kursiv entworfen wurden, umfasst oblique Schriftschnitte, die lediglich durch automatisierte Schrägstellung normaler Buchstaben derselben Familie erzeugt wurden („kursiviert“).
italic ist in der Regel die bessere Wahl, da die Form der Buchstaben und die Abstände der Buchstaben untereinander vom Schriftgestalter manuell festgelegt werden, was zu einer harmonischeren Textdarstellung führt.

Da beide Varianten sehr ähnlich sind, wird die jeweils andere verwendet, steht die gewählte Variante nicht zur Verfügung. Dieses Verhalten kann mit font-synthesis geändert werden.

Variable Schriftarten

Variable Schriftarten erlauben eine präzise Steuerung der Darstellung von kursivierten Schriftschnitten mit Hilfe des Werts <angle> im Anschluss an oblique.

Bei variablen Schriftarten nach TrueType- oder OpenType-Spezifikation wird die Schrägstellung bei oblique über die Eigenschaft "slnt"  realisiert, sowie italic mit einem Wert von 1 für die Eigenschaft  "ital"(siehe font-variation-settings).

Das nachstehende Beispiel benötigt einen Browser, der die Syntax nach CSS Fonts Level 4 versteht, d.h. die Angabe eines Winkels bei font-style: oblique.

HTML

<header>
    <input type="range" id="slant" name="slant" min="-90" max="90" />
    <label for="slant">Slant</label>
</header>
<div class="container">
    <p class="sample">...it would not be wonderful to meet a Megalosaurus, forty feet long or so, waddling like an elephantine lizard up Holborn Hill.</p>
</div>

CSS

/*
AmstelvarAlpha-VF is created by David Berlow (https://github.com/TypeNetwork/Amstelvar)
and is used here under the terms of its license:
https://github.com/TypeNetwork/Amstelvar/blob/master/OFL.txt
*/

@font-face {
  src: url('https://mdn.mozillademos.org/files/16044/AmstelvarAlpha-VF.ttf');
  font-family:'AmstelvarAlpha';
  font-style: normal;
}

label {
  font: 1rem monospace;
}

.container {
  max-height: 150px;
  overflow: scroll;
}

.sample {
  font: 2rem 'AmstelvarAlpha', sans-serif;
}

JavaScript

let slantLabel = document.querySelector('label[for="slant"]');
let slantInput = document.querySelector('#slant');
let sampleText = document.querySelector('.sample');

function update() {
  let slant = `oblique ${slantInput.value}deg`;
  slantLabel.textContent = `font-style: ${slant};`;
  sampleText.style.fontStyle = slant;
}

slantInput.addEventListener('input', update);

update();

Formal syntax

normal | italic | oblique <angle>?

Beispiel

.normal {
  font-style: normal;
}

.italic {
  font-style: italic;
}

.oblique {
  font-style: oblique;
}

Barrierefreiheit

Längere Abschnitte in kursiver Schrift können für Menschen mit einer Lesestörung (Legasthenie oder Dyslexie) schwer bis gar nicht zu erfassen sein. Kursive Schrift sollte deshalb nur als Hervorhebung einzelner Stellen verwendet werden.

Spezifikationen

Spezifikation Status Kommentar
CSS Fonts Module Level 4
Die Definition von 'font-style' in dieser Spezifikation.
Arbeitsentwurf Fügt die Möglichkeit einer Winkelangabe für oblique hinzu.
CSS Fonts Module Level 3
Die Definition von 'font-style' in dieser Spezifikation.
Anwärter Empfehlung Keine Änderung
CSS Level 2 (Revision 1)
Die Definition von 'font-style' in dieser Spezifikation.
Empfehlung Keine Änderung
CSS Level 1
Die Definition von 'font-style' in dieser Spezifikation.
Empfehlung Erste Definition
Initialwertnormal
Anwendbar aufalle Elemente. Auch anwendbar auf ::first-letter und ::first-line.
VererbtJa
Berechneter Wertwie angegeben
Animationstypdiskret

Browserkompatibilität

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid WebviewChrome für AndroidFirefox für AndroidOpera für AndroidSafari auf iOSSamsung Internet
font-styleChrome Vollständige Unterstützung 1Edge Vollständige Unterstützung 12Firefox Vollständige Unterstützung 1
Hinweise
Vollständige Unterstützung 1
Hinweise
Hinweise Before Firefox 44, oblique was not distinguished from italic.
IE Vollständige Unterstützung 4Opera Vollständige Unterstützung 7Safari Vollständige Unterstützung 1WebView Android Vollständige Unterstützung 1Chrome Android Vollständige Unterstützung 18Firefox Android Vollständige Unterstützung 4
Hinweise
Vollständige Unterstützung 4
Hinweise
Hinweise Before Firefox 44, oblique was not distinguished from italic.
Opera Android Vollständige Unterstützung 10.1Safari iOS Vollständige Unterstützung 1Samsung Internet Android Vollständige Unterstützung 1.0
oblique can accept an <angle>Chrome Keine Unterstützung NeinEdge Keine Unterstützung NeinFirefox Vollständige Unterstützung 61IE Keine Unterstützung NeinOpera Keine Unterstützung NeinSafari Keine Unterstützung NeinWebView Android Keine Unterstützung NeinChrome Android Keine Unterstützung NeinFirefox Android Vollständige Unterstützung 61Opera Android Keine Unterstützung NeinSafari iOS Keine Unterstützung NeinSamsung Internet Android Keine Unterstützung Nein

Legende

Vollständige Unterstützung  
Vollständige Unterstützung
Keine Unterstützung  
Keine Unterstützung
Siehe Implementierungshinweise.
Siehe Implementierungshinweise.