CSS font-style Eigenschaft
Die CSS font-style Eigenschaft legt den Schriftstil für einen Text fest. Es gibt drei Optionen: normal, italic und oblique.
Die CSS font-style Eigenschaft steuert, ob Text aufrecht oder geneigt dargestellt wird. Die drei Schlüsselwortwerte sind normal, italic und oblique. Sie ist die Standardmethode, um einen Textabschnitt in einen geneigten Stil zu wechseln, ohne die Schriftfamilie oder -stärke zu ändern.
Diese Seite erklärt, was jeder Wert bewirkt, den praktischen Unterschied zwischen italic und oblique, den optionalen Winkel für oblique und einen häufigen Fallstrick, wenn eine Schriftart kein echtes Kursivschnitt besitzt.
Warum Neigung wichtig ist
Geneigter Text ist ein visuelles Signal, das Leser sofort erkennen: Er signalisiert Betonung, Werktitel, Fremdsprachiges oder Fachbegriffe. Das Verwenden von font-style (statt etwa manuell verzerrten Text) hält diese Bedeutung in CSS kodiert, sodass sie über Schriftarten, Zoomstufen und assistive Technologien hinweg korrekt bleibt.
Es gibt zwei grundlegend verschiedene Arten, wie Schriftdesigner einen Buchstaben neigen:
- Italic ist ein eigenständiges, kursives Design – die Buchstabenformen werden neu gezeichnet, nicht nur gekippt. Ein echtes kursives
asieht oft deutlich anders aus als sein aufrechtes Gegenstück. - Oblique ist das aufrechte Design, das mechanisch um einige Grad geneigt wird. Die Formen bleiben gleich, sie lehnen sich lediglich.
Wenn Sie font-style: italic schreiben, sucht der Browser zunächst nach einem echten Kursivschnitt in der Schriftfamilie. Besitzt die Familie keinen, synthetisiert der Browser eine Neigung – was im Wesentlichen dem entspricht, was oblique erzeugen würde. Deshalb sehen italic und oblique bei vielen Web-Schriften identisch aus.
| Ausgangswert | normal |
|---|---|
| Gilt für | Alle Elemente. Gilt auch für ::first-letter und ::first-line. |
| Vererbt | Ja. |
| Animierbar | Nein. |
| Version | CSS1 |
| DOM Syntax | object.style.fontStyle = "oblique"; |
Syntax
font-style: normal | italic | oblique | initial | inherit;Das Schlüsselwort oblique akzeptiert auch einen optionalen Winkel von -90deg bis 90deg, mit dem Sie genau steuern können, wie stark der Text geneigt ist:
font-style: oblique 14deg;Wenn Sie den Winkel weglassen, verwenden Browser eine Standardneigung von etwa 14deg.
Beispiel für den Wert normal
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
h3.normal {
font-style: normal;
}
</style>
</head>
<body>
<h2>Font-style property example</h2>
<h3 class="normal">We wrote this text as normal.</h3>
<p>Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.</p>
</body>
</html>Der Unterschied zwischen italic und oblique
Wie oben beschrieben, fordert italic das eigens gestaltete Kursivdesign einer Schrift an, während oblique eine geneigte Version des aufrechten Designs anfordert. Wenn eine Schrift beide Schnitte enthält, können die beiden deutlich unterschiedlich aussehen; enthält sie nur einen, greift der Browser auf eine synthetisierte Alternative zurück, sodass sie gleich aussehen. Das folgende Beispiel rendert beide nebeneinander:
Beispiel mit den Werten italic und oblique
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p.italic {
font-style: italic;
}
p.oblique {
font-style: oblique;
}
</style>
</head>
<body>
<h2>Font-style property example</h2>
<p class="italic">We wrote this text as italic.</p>
<p class="oblique">We wrote this text as oblique.</p>
</body>
</html>Beispiel mit allen Werten
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p.normal {
font-style: normal;
}
p.italic {
font-style: italic;
}
p.oblique {
font-style: oblique;
}
</style>
</head>
<body>
<h2>Font-style property example</h2>
<p class="normal">We wrote this text as normal.</p>
<p class="italic">We wrote this text as italic.</p>
<p class="oblique">We wrote this text as oblique.</p>
</body>
</html>Werte
| Wert | Beschreibung | Ausprobieren |
|---|---|---|
| normal | Bedeutet, dass Textzeichen normal dargestellt werden. Dies ist der Standardwert dieser Eigenschaft. | Ausprobieren » |
| italic | Der Text wird kursiv dargestellt. | Ausprobieren » |
| oblique | Der Text wird schräg dargestellt. | Ausprobieren » |
| initial | Setzt die Eigenschaft auf ihren Standardwert zurück. | Ausprobieren » |
| inherit | Erbt die Eigenschaft vom übergeordneten Element. |
Häufiger Fallstrick: Schriften ohne Kursivschnitt
Nicht jede Schriftfamilie enthält einen echten Kursivschnitt. Wenn Sie font-style: italic auf eine solche Schrift anwenden, täuscht der Browser die Neigung vor, indem er die aufrechten Glyphen verzerrt. Das Ergebnis ist meist akzeptabel, wirkt aber etwas weniger poliert als ein gestalteter Kursivschnitt. Wenn Kursivschrift für Ihre Typografie wichtig ist, stellen Sie sicher, dass die geladene Schrift tatsächlich eine Kursivdatei enthält (bei variablen Schriften, dass die Kursivachse vorhanden ist) und importieren Sie diese Variante zusammen mit der regulären.
Um eine vom übergeordneten Element geerbte Neigung zu entfernen – etwa um ein Wort aufrecht innerhalb eines <em>- oder <i>-Elements zu halten – setzen Sie den Wert auf normal zurück:
em.upright {
font-style: normal;
}Verwandte Eigenschaften
font-style ist ein Bestandteil einer Schriftdeklaration. Diese Kapitel behandeln den Rest:
- CSS font-weight — steuert die Fettschrift, den anderen häufigen Betonungshinweis.
- CSS font-family — wählt das Schriftbild, das bestimmt, ob ein echter Kursivschnitt vorhanden ist.
- CSS font-size — legt die Textgröße fest.
- CSS font — die Kurzschreibweise, die
font-style,font-weight,font-sizeund mehr auf einmal setzt. - CSS text-decoration — eine weitere Möglichkeit, Text zu markieren, mit Unterstreichungen und Linien.