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 (en-US) 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 (en-US)).

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.
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 (en-US) und ::first-line (en-US).
VererbtJa
Berechneter Wertwie angegeben
Animationstypdiskret

Browserkompatibilität

BCD tables only load in the browser