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
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 derfont-style
oblique
ist; fürfont-style: normal
oderitalic
ist kein zweiter Wert erlaubt.
Formale Definition
Zugehörige @-Regel | @font-face |
---|---|
Anfangswert | normal |
Berechneter Wert | wie angegeben |
Formale Syntax
Beispiele
Eine kursive Schriftart festlegen
Nehmen wir als Beispiel die Garamond-Schriftfamilie in ihrer normalen Form, erhalten wir folgendes Ergebnis:
@font-face {
font-family: garamond;
src: url("garamond.ttf");
}
Die kursivierte Version dieses Textes verwendet dieselben Glyphen, die in der unstilisierten Version vorhanden sind, aber sie sind künstlich um einige Grad geneigt.
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.
@font-face {
font-family: garamond;
src: url("garamond-italic.ttf");
font-style: italic;
}
Spezifikationen
Specification |
---|
CSS Fonts Module Level 4 # font-prop-desc |