CSS font-style-Eigenschaft
Die font-style-Eigenschaft definiert den Schriftstil für einen Text. Die Eigenschaft hat drei Werte: normal, italic und oblique.
Italic ist eine kursiv aussehende Schriftart, während oblique eine geneigte Version der Standardschriftart ist.
| Anfangswert | 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
Syntax der CSS font-style-Eigenschaft
font-style: normal | italic | oblique | initial | inherit;Beispiel für die font-style-Eigenschaft:
Beispiel für die font-style-Eigenschaft:
<!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-Schriftstilen
Italic gilt als eine kursiv aussehende Schriftart, während oblique eine geneigte Version der Standardschriftart ist. Der Unterschied zwischen diesen beiden Schriftstilen ist jedoch sehr gering. Das folgende Beispiel zeigt die Verwendung von italic und oblique:
Beispiel für die font-style-Eigenschaft mit den Werten "italic" und "oblique":
Beispiel für die font-style-Eigenschaft 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 für die font-style-Eigenschaft mit allen Werten:
Beispiel für die font-style-Eigenschaft 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 (oblique) dargestellt. | Ausprobieren » |
| initial | Legt die Eigenschaft auf ihren Standardwert zurück. | Ausprobieren » |
| inherit | Erbt die Eigenschaft vom Elternelement. |
Praxis
Wie kann die font-style-Eigenschaft in CSS verwendet werden?