font-style CSS property
Baseline
Weitgehend verfügbar
*
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2015 browserübergreifend verfügbar.
* Einige Teile dieser Funktion werden möglicherweise unterschiedlich gut unterstützt.
Die CSS-Eigenschaft font-style legt fest, ob eine Schrift aus ihrer font-family mit einem normalen, kursiven oder schräggestellten Schriftschnitt dargestellt werden soll.
Kursive Schriftschnitte sind im Allgemeinen eher Schreibschriften und benötigen üblicherweise weniger horizontalen Platz als ihre unformatierten Entsprechungen, während schräggestellte Schriftschnitte normalerweise lediglich geneigte Versionen des regulären Schriftschnitts sind. Wenn der angegebene Stil nicht verfügbar ist, werden sowohl kursive als auch schräggestellte Schriftschnitte simuliert, indem die Glyphen des regulären Schriftschnitts künstlich geneigt werden (verwenden Sie font-synthesis, um dieses Verhalten zu steuern).
Probieren Sie es aus
font-style: normal;
font-style: italic;
font-style: oblique;
font-style: oblique 40deg;
<section id="default-example">
<p id="example-element">
London. Michaelmas term lately over, and the Lord Chancellor sitting in
Lincoln's Inn Hall. Implacable November weather. As much mud in the streets
as if the waters had but newly retired from the face of the earth, and it
would not be wonderful to meet a Megalosaurus, forty feet long or so,
waddling like an elephantine lizard up Holborn Hill.
</p>
</section>
@font-face {
src: url("/shared-assets/fonts/variable-fonts/AmstelvarAlpha-VF.woff2");
font-family: "Amstelvar";
font-style: normal;
}
section {
font-size: 1.2em;
font-family: "Amstelvar", serif;
}
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;
Werte
Diese Eigenschaft wird als einer der folgenden Schlüsselwortwerte angegeben. Auf das Schlüsselwort oblique kann optional ein <angle> folgen:
normal-
Wählt eine Schrift aus, die innerhalb einer
font-familyalsnormalklassifiziert ist. italic-
Wählt eine Schrift aus, die als
italicklassifiziert ist. Wenn keine kursive Version des Schriftschnitts verfügbar ist, wird stattdessen eine alsobliqueklassifizierte verwendet. Wenn keine von beiden verfügbar ist, wird der Stil künstlich simuliert. oblique-
Wählt eine Schrift aus, die als
obliqueklassifiziert ist. Wenn keine schräggestellte Version des Schriftschnitts verfügbar ist, wird stattdessen eine alsitalicklassifizierte verwendet. Wenn keine von beiden verfügbar ist, wird der Stil künstlich simuliert. oblique<angle>-
Wählt eine als
obliqueklassifizierte Schrift aus und gibt zusätzlich einen Winkel für die Neigung des Textes an. Wenn in der ausgewählten Schriftfamilie ein oder mehrere schräggestellte Schriftschnitte verfügbar sind, wird derjenige ausgewählt, der dem angegebenen Winkel am nächsten kommt. Wenn keine schräggestellten Schriftschnitte verfügbar sind, synthetisiert der Browser eine schräggestellte Version der Schrift, indem er einen normalen Schriftschnitt um den angegebenen Betrag neigt. Gültige Werte sind Gradwerte von-90degbis einschließlich90deg. Wenn kein Winkel angegeben ist, wird ein Winkel von 14 Grad verwendet. Positive Werte werden zum Zeilenende geneigt, während negative Werte zum Zeilenanfang geneigt werden.Im Allgemeinen werden bei einem angeforderten Winkel von 14 Grad oder mehr größere Winkel bevorzugt; andernfalls werden kleinere Winkel bevorzugt (den genauen Algorithmus finden Sie im Abschnitt zur Schriftzuordnung der Spezifikation).
Das Modul CSS-Schriften definiert außerdem die Werte left und right, um einen kursiven oder schräggestellten Schriftschnitt mit einer bestimmten Neigungsrichtung auszuwählen; diese Werte werden jedoch von keinem Browser unterstützt.
Variable Fonts
Variable Fonts können eine fein abgestufte Steuerung des Neigungsgrads eines schräggestellten Schriftschnitts bieten. Sie können diesen mithilfe des Modifikators <angle> für das Schlüsselwort oblique auswählen.
Für variable TrueType- oder OpenType-Schriften wird die Variation "slnt" verwendet, um unterschiedliche Neigungswinkel für oblique zu implementieren, und die Variation "ital" mit einem Wert von 1 wird verwendet, um italic-Werte zu implementieren. Siehe font-variation-settings.
Klicken Sie in den folgenden Codeblöcken auf „Play“, um das Beispiel im MDN Playground zu bearbeiten. Ändern Sie den Winkelwert, um zu sehen, wie sich die Neigung des Textes ändert.
<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>
@font-face {
src: url("https://mdn.github.io/shared-assets/fonts/variable-fonts/AmstelvarAlpha-VF.woff2");
font-family: "AmstelvarAlpha";
font-style: normal;
}
.sample {
font:
2rem "AmstelvarAlpha",
sans-serif;
/* font-variation-settings: "slnt" 12; */
font-style: oblique 23deg;
}
Barrierefreiheit
Große Textabschnitte, die mit einem font-style-Wert von italic gesetzt sind, können für Menschen mit kognitiven Beeinträchtigungen wie Legasthenie schwer lesbar sein.
Formale Definition
| Anfangswert | 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 |
left |
right |
oblique <angle [-90deg,90deg]>?
Beispiele
Schriftstile
.normal {
font-style: normal;
}
.italic {
font-style: italic;
}
.oblique {
font-style: oblique;
}
Spezifikationen
| Spezifikation |
|---|
| CSS Fonts Module Level 4 # font-style-prop |