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 im @font-face At-Regel angegebenen Schriften zu spezifizieren.
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 anzugeben. Die Werte für diesen CSS-Deskriptor sind die gleichen 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 zulässigen Winkelbereich 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
| Anfangswert | normal |
|---|---|
| Anwendbar auf | all elements and text. Auch anwendbar auf ::first-letter und ::first-line. |
| Vererbt | Ja |
| Berechneter Wert | wie angegeben |
| Animationstyp | by computed value type; normal animates as oblique 0deg |
Formale Syntax
font-style =
auto |
normal |
italic |
left |
right |
oblique [ <angle [-90deg,90deg]>{1,2} ]?
Beispiele
Festlegung eines kursiven Schriftstils
Betrachten Sie als Beispiel die Schriftfamilie Garamond; in ihrer normalen Form erhalten wir folgendes Ergebnis:
@font-face {
font-family: "garamond";
src: url("garamond.ttf");
}
Die kursive Version dieses Textes verwendet dieselben Glyphen wie die ungestylte Version, jedoch sind sie künstlich um einige Grad geneigt.
Andererseits, wenn eine echte kursive Version der Schriftfamilie existiert, können wir sie im src Deskriptor aufnehmen und den Schriftstil als kursiv angeben, um deutlich zu machen, dass die Schrift kursiv ist. Echte Kursivschrift verwendet unterschiedliche Glyphen und unterscheidet sich ein wenig von ihren aufrechten Gegenstücken, da sie einige einzigartige Merkmale aufweist und im Allgemeinen eine abgerundete und kalligraphische Qualität besitzt. 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 |