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.

* Some parts of this feature may have varying levels of support.

Die font-style CSS Eigenschaft legt fest, ob eine Schrift normal, kursiv oder oblique 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, serif;
}

Kursive Schriftarten sind in der Regel geschwungen und verwenden oft weniger horizontalen Raum als ihre ungestylten Gegenstücke, während oblique Schriftarten normalerweise nur geneigte Versionen der regulären Schrift sind. Wenn der angegebene Stil nicht verfügbar ist, werden sowohl kursive als auch oblique Schriftarten simuliert, indem die Zeichen der regulären Schrift künstlich geneigt werden (verwenden Sie font-synthesis, um dieses Verhalten zu steuern).

Syntax

css

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 Eigenschaft font-style wird als ein einzelnes Schlüsselwort festgelegt, das aus der unten aufgeführten Liste von Werten ausgewählt wird. Optional kann ein Winkel enthalten sein, wenn das Schlüsselwort oblique ist.

Werte

normal

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

italic

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

oblique

Wählt eine Schriftart, die als oblique klassifiziert ist. Wenn keine oblique Version der Schriftart verfügbar ist, wird stattdessen eine als italic klassifizierte verwendet. Wenn keine der beiden 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 oblique Schriftarten in der gewählten Schriftfamilie verfügbar sind, wird diejenige ausgewählt, die den angegebenen Winkel am besten trifft. Falls keine oblique Schriftarten verfügbar sind, wird der Browser eine oblique Version der Schrift synthetisieren, indem eine normale Schrift um den angegebenen Betrag geneigt wird. Gültige Werte sind Gradangaben von -90deg bis 90deg einschließlich. Wenn kein Winkel angegeben ist, wird ein Winkel von 14 Grad verwendet. Positive Werte neigen zum Ende der Zeile, während negative Werte zum Anfang geneigt sind.

Im Allgemeinen sind für einen angeforderten Winkel von 14 Grad oder mehr größere Winkel vorzuziehen; andernfalls sind kleinere Winkel vorzuziehen (siehe den font matching section der Spezifikation für den genauen Algorithmus).

Variable Fonts

Variable Schriftarten können eine feine Kontrolle über den Grad bieten, in dem eine oblique Schriftart geneigt wird. Sie können dies mit dem <angle>-Modifikator für das Schlüsselwort oblique auswählen.

Für TrueType- oder OpenType-Variable Fonts wird die "slnt" Variation verwendet, um unterschiedliche Neigungswinkel für oblique zu implementieren, und die "ital" Variation mit einem Wert von 1, um Kursivwerte 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 sehen.

html

<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>

css

@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 Einschränkungen 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

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

css

.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

Siehe auch

font-family
font-weight
SVG font-style Attribut
Lernen: Grundlegende Text- und Schriftgestaltung