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.

Der font-style CSS-Deskriptor ermöglicht es Autoren, Schriftstile für die im @font-face-At-Regel angegebenen Schriften festzulegen.

Für eine bestimmte Schriftfamilie können Autoren verschiedene Schriftschnitte herunterladen, die den unterschiedlichen Stilen derselben Schriftfamilie entsprechen. Danach können sie den Deskriptor font-style verwenden, um den Stil des Schriftschnitts explizit festzulegen. Die Werte für diesen CSS-Deskriptor sind dieselben wie die der entsprechenden font-style-Eigenschaft.

Syntax

css

font-style: normal;
font-style: italic;
font-style: oblique;
font-style: oblique 30deg;
font-style: oblique 30deg 50deg;

Werte

normal: Wählt die normale Version der Schriftfamilie aus.
italic: Gibt an, dass der Schriftschnitt eine kursivierte Version der normalen Schrift ist.
oblique: Gibt an, dass der Schriftschnitt eine künstlich geneigte Version der normalen Schrift ist.
oblique mit Winkel: Wählt eine Schrift aus, die als oblique klassifiziert ist, und gibt zusätzlich einen Winkel für die Neigung des Textes an.
oblique mit Winkelbereich: Wählt eine Schrift aus, die als oblique klassifiziert ist, und gibt zusätzlich einen Bereich erlaubter Winkel für die Neigung des Textes an. Beachten Sie, dass ein Bereich nur unterstützt wird, wenn der font-style oblique ist; für font-style: normal oder italic ist kein zweiter Wert erlaubt.

Formale Definition

Zugehörige @-Regel	`@font-face`
Anfangswert	`normal`
Berechneter Wert	wie angegeben

Formale Syntax

font-style = 
  auto                                      |
  normal                                    |
  italic                                    |
  left                                      |
  right                                     |
  oblique [ <angle [-90deg,90deg]>{1,2} ]?

Beispiele

Eine kursive Schriftart festlegen

Nehmen wir als Beispiel die Garamond-Schriftfamilie in ihrer normalen Form, erhalten wir folgendes Ergebnis:

css

@font-face {
  font-family: garamond;
  src: url("garamond.ttf");
}

unstyled Garamond

Die kursivierte Version dieses Textes verwendet dieselben Glyphen, die in der unstilisierten Version vorhanden sind, aber sie sind künstlich um einige Grad geneigt.

artificially sloped garamond

Wenn hingegen eine echte kursivierte Version der Schriftfamilie existiert, können wir sie im src-Deskriptor einfügen und den Schriftstil als kursiv festlegen, damit klar ist, dass die Schrift kursiviert ist. Echte Kursivschrift verwendet unterschiedliche Glyphen und unterscheidet sich etwas von ihren aufrechten Gegenstücken, da sie einige einzigartige Merkmale haben und im Allgemeinen eine abgerundete und kalligrafische Qualität aufweisen. Diese Schriftarten werden speziell von Schriftgestaltern erstellt und sind nicht künstlich geneigt.

css

@font-face {
  font-family: garamond;
  src: url("garamond-italic.ttf");
  font-style: italic;
}

italic garamond

Spezifikationen

Specification
CSS Fonts Module Level 4 # font-prop-desc