font-style-CSS-At-Rule-Deskriptor
Baseline
Weitgehend verfügbar
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2015 browserübergreifend verfügbar.
Der CSS-Deskriptor font-style ermöglicht es Autoren, Schriftstile für die in der At-Regel @font-face angegebenen Schriftarten festzulegen.
Für eine bestimmte Schriftfamilie können Autoren verschiedene Schriftschnitte herunterladen, die den unterschiedlichen Stilen derselben Schriftfamilie entsprechen, und dann den Deskriptor font-style verwenden, um den Stil des Schriftschnitts explizit festzulegen. Die Werte für diesen CSS-Deskriptor entsprechen denen der zugehörigen Eigenschaft font-style.
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-
Legt fest, dass der Schriftschnitt eine kursive Version der normalen Schrift ist.
oblique-
Legt fest, dass der Schriftschnitt eine künstlich geneigte Version der normalen Schrift ist.
obliquemit Winkel-
Wählt eine als
obliqueklassifizierte Schrift aus und gibt zusätzlich einen Winkel für die Neigung des Textes an. obliquemit Winkelbereich-
Wählt eine als
obliqueklassifizierte Schrift aus und gibt zusätzlich einen Bereich zulässiger Winkel für die Neigung des Textes an. Beachten Sie, dass ein Bereich nur unterstützt wird, wennfont-styleden Wertobliquehat; fürfont-style: normaloderitalicist kein zweiter Wert zulässig.
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
Einen kursiven Schriftstil angeben
Betrachten Sie als Beispiel die Schriftfamilie Garamond in ihrer normalen Form. Wir erhalten das folgende Ergebnis:
@font-face {
font-family: "garamond";
src: url("garamond.woff2");
}
Die kursivierte Version dieses Textes verwendet dieselben Glyphen wie die nicht formatierte Version, sie werden jedoch künstlich um einige Grad geneigt.
Wenn hingegen eine echte kursive Version der Schriftfamilie vorhanden ist, können wir sie in den Deskriptor src aufnehmen und den Schriftstil als kursiv angeben, sodass deutlich wird, dass die Schrift kursiv ist. Echte Kursivschriften verwenden andere Glyphen und unterscheiden sich etwas von ihren aufrechten Entsprechungen; sie weisen einige einzigartige Merkmale auf und besitzen im Allgemeinen eine abgerundete und kalligrafische Qualität. Diese Schriftarten werden speziell von Schriftdesignern erstellt und sind nicht künstlich geneigt.
@font-face {
font-family: "garamond";
src: url("garamond-italic.woff2");
font-style: italic;
}
Spezifikationen
| Spezifikation |
|---|
| CSS Fonts Module Level 4 # font-prop-desc |