font-style CSS-Attribut-Descriptor
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 font-style CSS Descriptor ermöglicht es Autoren, Schriftstile für die im @font-face Attribut angegebenen Schriften festzulegen.
Für eine bestimmte Schriftfamilie können Autoren verschiedene Schriftschnitte herunterladen, die den verschiedenen Stilen dieser Schriftfamilie entsprechen, und dann den font-style Descriptor verwenden, um den Stil des Schriftschnitts explizit zu spezifizieren. Die Werte für diesen CSS-Attribut-Descriptor 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 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 der zulässigen 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
Spezifizieren eines kursiven Schriftstils
Als Beispiel nehmen wir 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 nicht formatierten Version vorhanden sind, ist jedoch künstlich um einige Grad geneigt.
Wenn jedoch eine echte kursivierte Version der Schriftfamilie existiert, können wir sie im src Descriptor einschließen und den Schriftstil als kursiv spezifizieren, damit klar ist, dass die Schrift kursiviert ist. Echte Kursive verwenden unterschiedliche Glyphen und unterscheiden sich ein wenig von ihren aufrechten Gegenstücken, da sie einige einzigartige Merkmale aufweisen und im Allgemeinen eine abgerundete 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
| Spezifikation |
|---|
| CSS Fonts Module Level 4 # font-prop-desc |