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 in einer normalen, kursiven oder künstlerisch geneigten Form aus ihrer font-family
dargestellt werden soll.
Probieren Sie es aus
Kursive Schriftarten sind allgemein von Natur aus kursiv und verwenden in der Regel weniger horizontalen Platz als ihre ungestylten Gegenstücke, während künstlerisch geneigte Schriftarten normalerweise nur geneigte Versionen der regulären Schrift sind. Wenn der angegebene Stil nicht verfügbar ist, werden sowohl kursive als auch künstlerisch geneigte 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 ein einzelnes Schlüsselwort von der unten aufgeführten Liste von Werten angegeben, die 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 kursive Version der Schrift verfügbar ist, wird stattdessen eine alsoblique
klassifizierte verwendet. Wenn keine verfügbar ist, wird der Stil künstlich simuliert. oblique
-
Wählt eine Schriftart, die als
oblique
klassifiziert ist. Wenn keine künstlerisch geneigte Version der Schrift verfügbar ist, wird stattdessen eine alsitalic
klassifizierte verwendet. Wenn keine verfügbar ist, wird der Stil künstlich simuliert. oblique
<angle>
-
Wählt eine Schriftart, die als
oblique
klassifiziert ist, und gibt zusätzlich einen Winkel für die Neigung des Textes an. Wenn eine oder mehrere künstlerisch geneigte Schriftarten in der gewählten Schriftfamilie verfügbar sind, wird die gewählt, die dem angegebenen Winkel am nächsten kommt. Wenn keine künstlerisch geneigten Schriftarten verfügbar sind, wird der Browser eine künstlerisch geneigte Version der Schrift synthetisieren, indem ein normaler Schnitt um den angegebenen Betrag geneigt wird. Gültige Werte sind Winkelwerte von-90deg
bis90deg
, einschließlich. Wenn kein Winkel angegeben ist, wird ein Winkel von 14 Grad verwendet. Positive Werte sind am Ende der Zeile geneigt, während negative Werte zum Anfang hin geneigt sind.Im Allgemeinen werden für einen angeforderten Winkel von 14 Grad oder mehr größere Winkel bevorzugt; andernfalls werden kleinere Winkel bevorzugt (siehe den Abschnitt zur Schriftabstimmung der Spezifikation für den genauen Algorithmus).
Variable Fonts
Variable Fonts können eine feine Kontrolle über den Grad der Neigung einer künstlerisch geneigten Schrift bieten. Sie können dies mit dem <angle>
-Modifikator für das oblique
-Schlüsselwort auswählen.
Für TrueType oder OpenType Variable Schriften wird die "slnt"
Variation verwendet, um unterschiedliche Neigungswinkel für oblique zu implementieren, und die "ital"
Variation mit einem Wert von 1, um kursiv Werte zu implementieren. Siehe font-variation-settings
.
Klicken Sie auf "Play" in den unten stehenden Codeblöcken, um das Beispiel im MDN Playground zu bearbeiten. Ändern Sie den Winkelwert, um die Neigung des Textes zu ändern.
<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.ttf");
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 Dyslexie schwer zu lesen 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 |
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
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
font-style | ||||||||||||
italic | ||||||||||||
normal | ||||||||||||
oblique can accept an <angle> |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- See implementation notes.