font-style
Try it
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
bis90deg
(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
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 |
Initialwert | normal |
---|---|
Anwendbar auf | alle Elemente. Auch anwendbar auf ::first-letter (en-US) und ::first-line (en-US). |
Vererbt | Ja |
Berechneter Wert | wie angegeben |
Animationstyp | diskret |
Browserkompatibilität
BCD tables only load in the browser