font-style CSS property

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", serif;
}

Kursive Schriftarten sind in der Regel schnörkelhaft gestaltet und benötigen meist weniger horizontalen Raum als ihre ungestalteten Pendants, während schräge Schriftarten normalerweise einfach geneigte Versionen des regulären Schriftbildes sind. Wenn der angegebene Stil nicht verfügbar ist, werden sowohl kursive als auch schräge Schriftarten simuliert, indem die Glyphen des regulären Schriftbildes 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;

Werte

Diese Eigenschaft wird als einer der folgenden Schlüsselwortwerte angegeben. Das Schlüsselwort oblique kann optional von einem <angle> gefolgt werden:

normal

Wählt eine Schriftart aus, die als normal innerhalb einer font-family klassifiziert ist.

italic

Wählt eine Schriftart aus, die als italic klassifiziert ist. Wenn keine kursive Version der Schrift verfügbar ist, wird stattdessen eine als oblique klassifizierte verwendet. Wenn keine verfügbar ist, wird der Stil künstlich simuliert.

oblique

Wählt eine Schriftart aus, die als oblique klassifiziert ist. Wenn keine schräge Version der Schrift verfügbar ist, wird stattdessen eine als italic klassifizierte verwendet. Wenn keine verfügbar ist, wird der Stil künstlich simuliert.

oblique <angle>

Wählt eine als oblique klassifizierte Schriftart und gibt zusätzlich einen Winkel für die Schräglage des Textes an. Wenn eine oder mehrere schräge Schriftarten 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, generiert der Browser automatisch eine schräge Version der Schriftart, indem er ein normales Schriftbild um den angegebenen Betrag neigt. Gültige Werte sind Gradwerte von -90deg bis 90deg einschließlich. Wird kein Winkel angegeben, wird ein Winkel von 14 Grad verwendet. Positive Werte neigen sich zum Ende der Zeile hin, während negative Werte in Richtung Anfang der Zeile neigen.

Im Allgemeinen werden bei einem angeforderten Winkel von 14 Grad oder mehr größere Winkel bevorzugt; andernfalls werden kleinere Winkel bevorzugt (siehe den Schriftabgleichsabschnitt der Spezifikation für den genauen Algorithmus).

Variable Schriftarten

Variable Schriftarten können eine feine Kontrolle über das Maß erlauben, in dem eine schräge Schrift geneigt wird. Sie können dies mit dem <angle>-Modifikator für das Schlüsselwort oblique auswählen.

Für TrueType- oder OpenType-Variable-Schriftarten wird die "slnt"-Variation verwendet, um unterschiedliche Neigungswinkel für Schriftschnitte zu implementieren, und die "ital"-Variation mit einem Wert von 1 wird verwendet, um kursiv zu implementieren. Siehe font-variation-settings.

Klicken Sie auf "Play" in den untenstehenden 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 z.B. Dyslexie, schwer zu lesen sein.

• MDN Understanding WCAG, Leitfaden 1.4 Erklärungen
• W3C Understanding WCAG 2.2

Formale Definition

Formale Syntax

font-style = 
  normal                           |
  italic                           |
  left                             |
  right                            |
  oblique <angle [-90deg,90deg]>?  

Beispiele

Schriftstile

<p class="normal">This paragraph is normal.</p>
<p class="italic">This paragraph is italic.</p>
<p class="oblique">This paragraph is oblique.</p>

.normal {
  font-style: normal;
}

.italic {
  font-style: italic;
}

.oblique {
  font-style: oblique;
}

Spezifikationen

Browser-Kompatibilität

Siehe auch

• font-family
• font-weight
• SVG font-style Attribut
• Lernen: Grundlegendes zu Text- und Schriftstilgestaltung