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 Juli 2015.
Der font-style CSS Deskriptor ermöglicht es Autoren, Schriftstile für die Schriften zu spezifizieren, die in der @font-face At-Regel angegeben sind.
Für eine bestimmte Schriftfamilie können Autoren verschiedene Schriftschnitte herunterladen, die den unterschiedlichen Stilen derselben Schriftfamilie entsprechen, und dann den font-style Deskriptor verwenden, um den Stil des Schriftschnitts explizit zu spezifizieren. 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.
obliquemit Winkel-
Wählt eine Schrift, die als
obliqueklassifiziert ist, und gibt zusätzlich einen Winkel für die Neigung des Textes an. obliquemit Winkelbereich-
Wählt eine Schrift, die als
obliqueklassifiziert ist, 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, wenn derfont-styleobliqueist; fürfont-style: normaloderitalicist 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
Einen kursiven Schriftstil angeben
Betrachten Sie 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 ungestylten Version vorhanden sind, aber sie sind künstlich um einige Grad geneigt.
Wenn jedoch eine echte kursivierte Version der Schriftfamilie existiert, können wir diese im src Deskriptor einfügen und den Schriftstil als kursiv angeben, damit klar ist, dass die Schrift kursive Merkmale aufweist. Echte Kursivschriften verwenden andere Glyphen und unterscheiden sich ein wenig von ihren aufrechten Gegenstücken, indem sie einige einzigartige Merkmale aufweisen und im Allgemeinen eine gerundete und kalligrafische Qualität haben. Diese Schriften 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 |
Browser-Kompatibilität
Loading…