CSS-Eigenschaft: font-variant, Kategorien: Schrift (allgemein), Fonts (CSS 2.1), Fonts (CSS 3)
Kapitälchen / kleine Großbuchstaben
Wandelt Kleinbuchstaben in Großbuchstaben um, die allerdings in Ihrer Schrifthöhe kleiner sind als die richtigen Großbuchstaben im selben Text.
| Kurzbeschreibung | Werte | Standardwert | Kategorie | Hinweis |
|---|---|---|---|---|
| Kapitälchen / kleine Großbuchstaben |
| normal | Neu in CSS 3 |
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
- font-style
- font-synthesis
- Aktuelle Seite: 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-variant zu beachten:
- Einfach einzusetzende Schriftvariante, allerdings im Arbeitsalltag eher seltener zu sehen (man sieht eher bold oder italic zur Texthervorhebung).
- Setzt alle Buchstaben auf Großbuchstaben, allerdings (im Gegensatz zu text-transform: uppercase) werden die Großbuchstaben normal und die restlichen Zeichen zwar in Großbuchstaben, aber in der Höhe von Kleinbuchstaben dargestellt.
- Generelle Informationen zu Kapitälchen: http://de.wikipedia.org/wiki/Kapitälchen
- Ein gutes Bespiel dafür, dass die ganze Entwicklung des Internets noch sehr jung ist und der CSS21-Standard erst im Sommer 2011 zu einer finale Fassung wurde. Man könnte sich diese Eigenschaft sowohl als weitere Schriftstil per font-style oder auch als Eigenschaft des text-transform sein. Von daher bergen diese verwandten Eigenschaften die Gefahr, schnell verwechselt bzw. vermischt zu werden.
 Firefox |  Chrome |  Internet Explorer |  Safari |  Opera |
|||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| CSS21 |
|
|
|
|
| ||||||||||||||||||||||||||||||||||||||||||
Hinweis
Das CSS Fonts Module Level 3 erweitert
font-variant um diverse Parameter. Die hier zu lesende Beschreibung, die Information zur
Browserunterstützung sowie die Beispiele beziehen sich auf CSS 2.1 mit den Parametern
normal und small-caps. Erklärungen zu neuen CSS3-Features werden zu gegebener Zeit ergänzt.
Weiterführende Informationen zu font-variant:
- W3C Spezifikation:
http://www.w3.org/TR/css3-fonts/#propdef-font-variant
- letzte CSS-Eigenschaft (Acc-Key: ALT + SHIFT + z):
font-synthesis - nächste CSS-Eigenschaft (Acc-Key: ALT + SHIFT + w):
font-variant-alternates
Beispiele
HTML:
<p>Auch wenn ein Text nur kurz ist, sollte trotzdem irgendwie versucht werden, eine nachvollziehbare Wortfolge anzuzeigen, da man mit zehn Mal fünf bis acht aneinanderhängende X keine reale Ausspielung erzeugt wird.</p>CSS:
/* Standardausgabe. */Beispiel Nr. 1 So sieht's aus:
Auch wenn ein Text nur kurz ist, sollte trotzdem irgendwie versucht werden, eine nachvollziehbare Wortfolge anzuzeigen, da man mit zehn Mal fünf bis acht aneinanderhängende X keine reale Ausspielung erzeugt wird.
HTML:
<p class="doSmall">Auch wenn ein Text nur kurz ist, sollte trotzdem irgendwie versucht werden, eine nachvollziehbare Wortfolge anzuzeigen, da man mit zehn Mal fünf bis acht aneinanderhängende X keine reale Ausspielung erzeugt wird.</p>CSS:
p.doSmall {
font-variant: small-caps;
}Beispiel Nr. 2 So sieht's aus:
Auch wenn ein Text nur kurz ist, sollte trotzdem irgendwie versucht werden, eine nachvollziehbare Wortfolge anzuzeigen, da man mit zehn Mal fünf bis acht aneinanderhängende X keine reale Ausspielung erzeugt wird.
HTML:
<p class="doAlt">Es hat lange gedauert, bis ich <span>begriffen</span> habe, was es bedeutet, ein blinder Text zu sein.</p>CSS:
p.doAlt {
font-variant: small-caps;
font-family: verdana;
font-size: 2em;
}
p.doAlt span {
font-variant: normal;
color: blue;
}
/* Über den Wert "normal" wird ein Text wieder in normalen Buchstaben dargestellt. */Beispiel Nr. 3 So sieht's aus:
Es hat lange gedauert, bis ich begriffen habe, was es bedeutet, ein blinder Text zu sein.
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!