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
dargestellt werden soll.
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.ttf");
font-family: Amstelvar;
font-style: normal;
}
section {
font-size: 1.2em;
font-family: Amstelvar;
}
Kursive Schriftarten sind im Allgemeinen schreibschriftähnlich und nutzen oft weniger horizontalen Raum als ihre ungestalteten Gegenstücke, während schräge Stile meist nur geneigte Versionen der regulären Schrift sind. Wenn der spezifizierte Stil nicht verfügbar ist, werden sowohl kursive als auch schräge Stile durch künstliches Neigen der Zeichen der regulären Schriftart simuliert (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 aus der untenstehenden Liste von Werten spezifiziert, das 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 eine alsoblique
klassifizierte Version verwendet. Wenn keine 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 eine alsitalic
klassifizierte Version verwendet. Wenn keine verfügbar ist, wird der Stil künstlich simuliert. oblique
<angle>
-
Wählt eine als
oblique
klassifizierte Schriftart aus und spezifiziert zusätzlich einen Winkel für den Schrägstand des Textes. Wenn eine oder mehrere schräge Versionen in der gewählten Schriftfamilie verfügbar sind, wird diejenige gewählt, die dem angegebenen Winkel am nächsten kommt. Wenn keine schrägen Versionen verfügbar sind, wird der Browser eine schräge Version der Schriftart synthetisieren, indem eine normale Schrift im angegebenen Ausmaß geneigt wird. Gültige Werte sind Gradangaben von-90deg
bis90deg
einschließlich. Wenn kein Winkel angegeben wird, wird ein Winkel von 14 Grad verwendet. Positive Werte sind in Richtung des Endes der Zeile geneigt, während negative Werte zum Anfang hin geneigt sind.Generell gilt: Für einen angeforderten Winkel von 14 Grad oder mehr werden 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 Schräglage eines schrägen Stils bieten. Sie können dies mithilfe des <angle>
Modifikators für das oblique
Schlüsselwort auswählen.
Für TrueType- oder OpenType-Variable Fonts wird die "slnt"
Variante verwendet, um unterschiedliche Schrägungswinkel für oblique zu implementieren, und die "ital"
Variante mit einem Wert von 1, um kursive Werte zu implementieren. Siehe font-variation-settings
.
Klicken Sie auf "Play" in den Codeblöcken unten, um das Beispiel im MDN Playground zu bearbeiten. Ändern Sie den Winkelwert, um zu sehen, wie sich der Schrägstand 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.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 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
Beispiele
Schriftartenstile
.normal {
font-style: normal;
}
.italic {
font-style: italic;
}
.oblique {
font-style: oblique;
}
Spezifikationen
Specification |
---|
CSS Fonts Module Level 4 # font-style-prop |