Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten.Erfahre mehr über dieses Experiment.
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 Juli 2015.
* Some parts of this feature may have varying levels of support.
Diefont-styleCSS Eigenschaft legt fest, ob eine Schriftart mit einem normalen, kursiven oder schrägen Schnitt aus ihrerfont-family gestaltet werden soll.
Probieren Sie es aus
font-style: normal;font-style: italic;font-style: oblique;font-style: oblique 40deg;<section> <p> 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", serif;}Kursive Schriftarten sind in der Regel geschwungen und verwenden im Allgemeinen weniger horizontalen Raum als ihre ungestylten Gegenstücke, währendschräge Schnitte normalerweise einfach geneigte Versionen der regulären Schrift sind. Wenn der angegebene Stil nicht verfügbar ist, werden sowohl kursive als auch schräge Schnitte simuliert, indem die Glyphen der regulären Schrift künstlich geneigt werden (verwenden Siefont-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;Diefont-style-Eigenschaft wird als ein einzelnes Schlüsselwort angegeben, das aus der unten stehenden Liste ausgewählt wird und optional einen Winkel enthalten kann, wenn das Schlüsselwortoblique ist.
Werte
normalWählt eine Schrift, die in einer
font-familyalsnormalklassifiziert ist.italicWählt eine Schrift, die als
italicklassifiziert ist. Wenn keine kursive Version der Schrift verfügbar ist, wird stattdessen eine alsobliqueklassifizierte verwendet. Wenn keine verfügbar ist, wird der Stil künstlich simuliert.obliqueWählt eine Schrift, die als
obliqueklassifiziert ist. Wenn keine schräge Version der Schrift verfügbar ist, wird stattdessen eine alsitalicklassifizierte verwendet. Wenn keine verfügbar ist, wird der Stil künstlich simuliert.oblique<angle>Wählt eine als
obliqueklassifizierte Schrift und gibt zusätzlich einen Winkel für die Schräglage des Textes an. Wenn eine oder mehrere schräge Schnitte in der gewählten Schriftfamilie verfügbar sind, wird derjenige ausgewählt, der am ehesten dem angegebenen Winkel entspricht. Wenn keine schrägen Schnitte verfügbar sind, erzeugt der Browser eine geneigte Version der Schrift, indem er eine normale Schrift um den angegebenen Betrag neigt. Gültige Werte sind Gradwerte von-90degbis90degeinschließlich. Wenn kein Winkel angegeben ist, wird ein Winkel von 14 Grad verwendet. Positive Werte sind in Richtung Ende der Zeile geneigt, während negative Werte in Richtung Anfang geneigt sind.Im Allgemeinen werden bei einem angeforderten Winkel von 14 Grad oder mehr größere Winkel bevorzugt; andernfalls werden kleinere Winkel bevorzugt (siehe den Musterabschnitt derSpezifikation für den genauen Algorithmus).
Variable Schriftarten
Variable Schriftarten können eine genaue Kontrolle über das Ausmaß bieten, in dem ein schräger Schnitt geneigt wird. Dies kann mit dem<angle>-Modifikator für das Schlüsselwortoblique ausgewählt werden.
Für TrueType- oder OpenType-Variable-Schriften wird die"slnt"-Variation verwendet, um unterschiedliche Schrägwinkel für Schrägschrift umzusetzen, und die"ital"-Variation mit einem Wert von 1 wird verwendet, um Kursivwerte zu implementieren. Siehefont-variation-settings.
Klicken Sie auf "Play" in den Codeblöcken unten, um das Beispiel im MDN Playground zu bearbeiten. Ändern Sie den Winkelwert, um die Neigung des Textes zu sehen.
<p> ...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 einemfont-style-Wert vonitalic gesetzt sind, können für Menschen mit kognitiven Bedenken wie Dyslexie 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 asoblique 0deg |
Formale Syntax
font-style =
normal|
italic|
left|
right|
oblique<angle [-90deg,90deg]>?
Beispiele
Schriftartenstile
<p>This paragraph is normal.</p><p>This paragraph is italic.</p><p>This paragraph is oblique.</p>.normal { font-style: normal;}.italic { font-style: italic;}.oblique { font-style: oblique;}Spezifikationen
| Specification |
|---|
| CSS Fonts Module Level 4 # font-style-prop |