font-style
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
Die font-style
CSS Eigenschaft legt fest, ob eine Schriftart mit einem normalen, kursiven oder schrägen Stil aus ihrer font-family
gestaltet werden soll.
Probieren Sie es aus
Kursive Schriftarten sind in der Regel geschwungen und benötigen normalerweise weniger horizontalen Raum als ihre ungestylten Gegenstücke, während schräge Schriftarten meistens einfach geneigte Versionen der regulären Form sind. Wenn der angegebene Stil nicht verfügbar ist, werden sowohl kursive als auch schräge Schriftarten simuliert, indem die Glyphen der regulären Schrift künstlich geneigt werden (verwenden Sie font-synthesis
, um dieses Verhalten zu steuern).
Syntax
font-style: normal;
font-style: italic;
font-style: oblique;
font-style: oblique 10deg;
/* Global values */
font-style: inherit;
font-style: initial;
font-style: revert;
font-style: revert-layer;
font-style: unset;
Die font-style
Eigenschaft wird als einzelnes Schlüsselwort angegeben, das aus der untenstehenden Liste der Werte ausgewählt wird und optional einen Winkel enthalten kann, wenn das Schlüsselwort oblique
ist.
Werte
normal
-
Wählt eine Schriftart, die innerhalb einer
font-family
alsnormal
klassifiziert ist. italic
-
Wählt eine Schriftart, die als
italic
klassifiziert ist. Wenn keine Kursivversion der Schrift verfügbar ist, wird stattdessen eine alsoblique
klassifizierte verwendet. Wenn keine davon verfügbar ist, wird der Stil künstlich simuliert. oblique
-
Wählt eine Schriftart, die als
oblique
klassifiziert ist. Wenn keine schräge Version der Schrift verfügbar ist, wird stattdessen eine alsitalic
klassifizierte verwendet. Wenn keine davon verfügbar ist, wird der Stil künstlich simuliert. oblique
<angle>
-
Wählt eine Schriftart, die als
oblique
klassifiziert ist, und spezifiziert zusätzlich einen Winkel für die Neigung des Textes. Wenn eine oder mehrere schräge Versionen in der gewählten Schriftfamilie verfügbar sind, wird diejenige ausgewählt, die dem angegebenen Winkel am nächsten kommt. Wenn keine schrägen Schriftarten verfügbar sind, synthetisiert der Browser eine schräge Version der Schrift durch Neigung einer normalen Schrift um den angegebenen Betrag. Gültige Werte sind Gradwerte von-90deg
bis90deg
einschließlich. Wenn kein Winkel angegeben ist, wird ein Winkel von 14 Grad verwendet. Positive Werte sind zum Ende der Zeile geneigt, während negative Werte zum Anfang geneigt sind.Im Allgemeinen werden für einen angeforderten Winkel von 14 Grad oder mehr größere Winkel bevorzugt, ansonsten werden kleinere Winkel bevorzugt (siehe den font matching Abschnitt der Spezifikation für den genauen Algorithmus).
Variable Fonts
Variable Schriftarten können eine feine Steuerung über den Grad der Neigung einer schrägen Schrift ermöglichen. Sie können dies mit dem <angle>
Modifikator für das oblique
Schlüsselwort auswählen.
Für TrueType- oder OpenType-Variable-Schriftarten wird die "slnt"
Variation verwendet, um unterschiedliche Neigungswinkel für schräge Schriftarten zu implementieren, und die "ital"
Variation mit einem Wert von 1 wird verwendet, um kursive Werte zu implementieren. Siehe font-variation-settings
.
Hinweis: Damit das folgende Beispiel funktioniert, benötigen Sie einen Browser, der die CSS Fonts Level 4 Syntax unterstützt, in der font-style: oblique
einen <angle>
akzeptieren kann. Die Demo lädt mit font-style: oblique 23deg;
. Ändern Sie den Wert, um die Neigung des Textes zu sehen.
Barrierefreiheit
Große Textabschnitte mit einem font-style
Wert von italic
können für Menschen mit kognitiven Beeinträchtigungen wie Legasthenie schwer lesbar sein.
Formale Definition
Initialer Wert | normal |
---|---|
Anwendbar auf | all elements and text. Auch anwendbar auf ::first-letter und ::first-line . |
Vererbt | Ja |
Berechneter Wert | wie angegeben |
Animationstyp | by computed value type; normal animates as oblique 0deg |
Formale Syntax
font-style =
normal |
italic |
oblique <angle [-90deg,90deg]>?
Beispiele
Schriftartenstile
.normal {
font-style: normal;
}
.italic {
font-style: italic;
}
.oblique {
font-style: oblique;
}
Spezifikationen
Specification |
---|
CSS Fonts Module Level 4 # font-style-prop |
Browser-Kompatibilität
BCD tables only load in the browser