CSS-Eigenschaft: font-style, Kategorien: Schrift (allgemein), Fonts (CSS 2.1), Fonts (CSS 3)
Schriftstil (kursiv)
Steuert den Schriftstil, stellt die Schrift auf kursiv oder wieder auf normal, falls eine Eigenschaft vererbt wurde.
| Kurzbeschreibung | Werte | Standardwert | Kategorie | Hinweis |
|---|---|---|---|---|
| Schriftstil (kursiv) |
| normal |
Verwandte Eigenschaften aus der Kategorie: Schrift (allgemein), Fonts (CSS 2.1), Fonts (CSS 3):
- additive-symbols
- fallback
- font
- font-family
- font-feature-settings
- font-kerning
- font-language-override
- font-size
- font-size-adjust
- font-stretch
- Aktuelle Seite: font-style
- font-synthesis
- font-variant
- font-variant-alternates
- font-variant-caps
- font-variant-east-asian
- font-variant-ligatures
- font-variant-numeric
- font-variant-position
- font-weight
- negative
- prefix
- range
- src
- suffix
- symbols
- system
- unicode-range
Folgendes ist beim Einsatz von font-style zu beachten:
- Nicht sonderlich viel ;-)
- normal ist die Standarddarstellung von Text, die per italic oder oblique schräg gestellt wird.
- Um einen vererbten font-style zurück zu setzen, kann die Eigenschaft normal gesetzt werden, wie im Beispiel Nr. 3 zu sehen ist.
- Text fett zu stylen ist keine Aufgabe des font-style, dafür die die Eigenschaft font-weight zuständig.
- kursiv und oblique sind Wege, um einzelne Worte oder Textabschnitte hervorzuheben. Falls eine inhaltliche Hervorhebung beabsichtig ist, sollte man dies auf semantischer Ebene umsetzen, im HTML <em> oder <strong> einsetzen und auf diese CSS-Eigenschaft verzichten. Falls es "nur" um eine Frage des Designs geht, ist die Eigenschaft richtig.
- Im W3C-Standard entfällt der Wert inherit.
 Firefox |  Chrome |  Internet Explorer |  Safari |  Opera |
|||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| CSS21 |
|
|
|
|
| ||||||||||||||||||||||||||||||||||||||||||
Hinweis
italic und oblique sind zwei Wege des Schrägstellens. italic verweist auf eine eigene Schriftdatei, die als italic Font hinterlegt ist, die zur Darstellung der Schrift verwendet werden soll. oblique hingegen verwendet keine eigene Schriftdatei, sondern stellt die normale Schrift über ein Rendering im Browser schräg.
Soweit die Theorie. Schaut man sich die Schriften im Browser an, sehen beide font-style-Varianten identisch aus. Was nun die Frage aufwirft, was der Browser wirklich macht.
Im Beispiel Nr. 5 ist als font-family Century angegeben, die lediglich nur eine normale Fontdatei hat. Sowohl italic als auch oblique werden umgesetzt, was zeigt, dass das Rendering zum Schrägstellen vom Browser für beide Varianten eingesetzt wird.
Beispiel Nr. 6 setzt die font-family Elephant ein, welche einen italic Font hat. Dieser weicht sehr vom normalen Elephant-Font ab, dass man deutlich erkennt: Hier wird für oblique die Buchstaben des italic Fonts eingsetzt.
Demnach wird stets ein italic-Font für beide Parameter verwendet, wenn dieser vorhanden ist. Oder es wird für beide Parameter das Rendering des Browsers verwendet, wenn kein italic Font vorhanden ist.
Weitere Informationen unter http://en.wikipedia.org/wiki/Oblique_type und http://www.zubair.info/2010/11/05/css-font-style-oblique-vs-italic.html
Weiterführende Informationen zu font-style:
- W3C Spezifikation:
http://www.w3.org/TR/WD-font/#font-style
- letzte CSS-Eigenschaft (Acc-Key: ALT + SHIFT + z):
font-stretch - nächste CSS-Eigenschaft (Acc-Key: ALT + SHIFT + w):
font-synthesis
Beispiele
HTML:
<p>Es hat lange gedauert, bis ich begriffen habe, was es bedeutet, ein blinder Text zu sein: Man macht keinen Sinn. Man wirkt hier und da aus dem Zusammenhang gerissen. Oft wird man gar nicht erst gelesen.</p>CSS:
/* Standarddarstellung durch den Browser */Beispiel Nr. 1 So sieht's aus:
Es hat lange gedauert, bis ich begriffen habe, was es bedeutet, ein blinder Text zu sein: Man macht keinen Sinn. Man wirkt hier und da aus dem Zusammenhang gerissen. Oft wird man gar nicht erst gelesen.
HTML:
<p class="doItalic">Es hat lange gedauert, bis ich begriffen habe, was es bedeutet, ein blinder Text zu sein: Man macht keinen Sinn. Man wirkt hier und da aus dem Zusammenhang gerissen. Oft wird man gar nicht erst gelesen.</p>CSS:
.doItalic {
font-style: italic;
}Beispiel Nr. 2 So sieht's aus:
Es hat lange gedauert, bis ich begriffen habe, was es bedeutet, ein blinder Text zu sein: Man macht keinen Sinn. Man wirkt hier und da aus dem Zusammenhang gerissen. Oft wird man gar nicht erst gelesen.
HTML:
<p class="doItalic">Es hat lange gedauert, bis ich begriffen habe, was es bedeutet, <span class="doNormal">ein blinder Text</span> zu sein: Man macht keinen Sinn. Man wirkt hier und da aus dem Zusammenhang gerissen. Oft wird man gar nicht erst gelesen.</p>CSS:
.doNormal {
font-style: normal;
color: blue;
}
/* Innerhalt eines gestylten Text kann der Wert "normal" eingesetzt werden, um den font-style auf den Default-Wert zu setzen. */Beispiel Nr. 3 So sieht's aus:
Es hat lange gedauert, bis ich begriffen habe, was es bedeutet, ein blinder Text zu sein: Man macht keinen Sinn. Man wirkt hier und da aus dem Zusammenhang gerissen. Oft wird man gar nicht erst gelesen.
HTML:
<p class="doOblique">Es hat lange gedauert, bis ich begriffen habe, was es bedeutet, ein blinder Text zu sein: Man macht keinen Sinn. Man wirkt hier und da aus dem Zusammenhang gerissen. Oft wird man gar nicht erst gelesen.</p>CSS:
.doOblique {
font-style: oblique;
}Beispiel Nr. 4 So sieht's aus:
Es hat lange gedauert, bis ich begriffen habe, was es bedeutet, ein blinder Text zu sein: Man macht keinen Sinn. Man wirkt hier und da aus dem Zusammenhang gerissen. Oft wird man gar nicht erst gelesen.
HTML:
<p class="doCentury">Es hat lange gedauert, bis ich begriffen habe, was es bedeutet, ein blinder Text zu sein: Man macht keinen Sinn. Man wirkt hier und da aus dem Zusammenhang gerissen. Oft wird man gar nicht erst gelesen.</p>
<p class="doCentury doItalic">Es hat lange gedauert, bis ich begriffen habe, was es bedeutet, ein blinder Text zu sein: Man macht keinen Sinn. Man wirkt hier und da aus dem Zusammenhang gerissen. Oft wird man gar nicht erst gelesen.</p>
<p class="doCentury doOblique">Es hat lange gedauert, bis ich begriffen habe, was es bedeutet, ein blinder Text zu sein: Man macht keinen Sinn. Man wirkt hier und da aus dem Zusammenhang gerissen. Oft wird man gar nicht erst gelesen.</p>CSS:
.doCentury {
font-family: Century;
}Beispiel Nr. 5 So sieht's aus:
Es hat lange gedauert, bis ich begriffen habe, was es bedeutet, ein blinder Text zu sein: Man macht keinen Sinn. Man wirkt hier und da aus dem Zusammenhang gerissen. Oft wird man gar nicht erst gelesen.
Es hat lange gedauert, bis ich begriffen habe, was es bedeutet, ein blinder Text zu sein: Man macht keinen Sinn. Man wirkt hier und da aus dem Zusammenhang gerissen. Oft wird man gar nicht erst gelesen.
Es hat lange gedauert, bis ich begriffen habe, was es bedeutet, ein blinder Text zu sein: Man macht keinen Sinn. Man wirkt hier und da aus dem Zusammenhang gerissen. Oft wird man gar nicht erst gelesen.
HTML:
<p class="doElephant">Es hat lange gedauert, bis ich begriffen habe, was es bedeutet, ein blinder Text zu sein: Man macht keinen Sinn. Man wirkt hier und da aus dem Zusammenhang gerissen. Oft wird man gar nicht erst gelesen.</p>
<p class="doElephant doItalic">Es hat lange gedauert, bis ich begriffen habe, was es bedeutet, ein blinder Text zu sein: Man macht keinen Sinn. Man wirkt hier und da aus dem Zusammenhang gerissen. Oft wird man gar nicht erst gelesen.</p>
<p class="doElephant doOblique">Es hat lange gedauert, bis ich begriffen habe, was es bedeutet, ein blinder Text zu sein: Man macht keinen Sinn. Man wirkt hier und da aus dem Zusammenhang gerissen. Oft wird man gar nicht erst gelesen.</p>CSS:
.doElephant {
font-family: Elephant;
}Beispiel Nr. 6 So sieht's aus:
Es hat lange gedauert, bis ich begriffen habe, was es bedeutet, ein blinder Text zu sein: Man macht keinen Sinn. Man wirkt hier und da aus dem Zusammenhang gerissen. Oft wird man gar nicht erst gelesen.
Es hat lange gedauert, bis ich begriffen habe, was es bedeutet, ein blinder Text zu sein: Man macht keinen Sinn. Man wirkt hier und da aus dem Zusammenhang gerissen. Oft wird man gar nicht erst gelesen.
Es hat lange gedauert, bis ich begriffen habe, was es bedeutet, ein blinder Text zu sein: Man macht keinen Sinn. Man wirkt hier und da aus dem Zusammenhang gerissen. Oft wird man gar nicht erst gelesen.
Fehler melden
Diese Referenz ist ein Freizeitprojekt ohne aufwendiges Lektorat oder Vergleichbarem. Von daher lassen sich bei dem Umfang dieser Referenz trotzt größtmöglicher Sorgfalt Fehler nicht vermeiden.
Hilf, die Qualität dieser Seite zu verbessern! Sollte Dir ein Fehler auffallen, sei es in den Erklärungen, Beispielen oder den Informationen zum Browsersupport, seien es orthographische oder grammatikalische, sende eine kurze E-Mail an info@css-wiki.com. Auch Anregungen und Verbesserungsvorschläge sind jeder Zeit Willkommen. Jede E-Mail wird persönlich beantwortet!
Vielen Dank!