Der eigene Online-Shop für Profi-Fotografen. Für Fotografen, die keine Zeit zu verlieren haben.

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.

CSS-Eigenschaft: font-variant
KurzbeschreibungWerteStandardwertKategorieHinweis
Kapitälchen / kleine Großbuchstaben
  • normal
  • none(CSS 3)
  • [common-lig-values](CSS 3)
  • [discretionary-lig-values](CSS 3)
  • [historical-lig-values](CSS 3)
  • [contextual-alt-values](CSS 3)
  • stylistic([feature-value-name])(CSS 3)
  • historical-forms(CSS 3)
  • styleset([feature-value-name](CSS 3)
  • character-variant([feature-value-name](CSS 3)
  • swash([feature-value-name])(CSS 3)
  • ornaments([feature-value-name])(CSS 3)
  • annotation([feature-value-name])(CSS 3)
  • small-caps
  • all-small-caps(CSS 3)
  • petite-caps(CSS 3)
  • all-petite-caps(CSS 3)
  • unicase(CSS 3)
  • titling-caps(CSS 3)
  • [numeric-figure-values](CSS 3)
  • [numeric-spacing-values](CSS 3)
  • [numeric-fraction-values](CSS 3)
  • ordinal(CSS 3)
  • slashed-zero(CSS 3)
  • [east-asian-variant-values](CSS 3)
  • [east-asian-width-values](CSS 3)
  • ruby(CSS 3)
normal
Allgemein:
Schrift
CSS 2.1:
Fonts
CSS 3:
Fonts
Neu in CSS 3
 

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.
Browserunterstützung von font-variant
Firefox
Firefox
Google Chrome
Google
Chrome
Internet Explorer
Internet
Explorer
Safari
Safari
Opera
Opera
CSS21
Version: 16Version: 25Version: 30Version: 31Version: 32
j
Version: 20Version: 30Version: 35Version: 36Version: 37
j
Version: 8Version: 9Version: 10Version: 11
j
Version: 4Version: 5Version: 6Version: 7
j
Version: 10Version: 11Version: 12
j

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:



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!

A-Z:

Schnell­auswahl

Seiten:

Letzte Änderung: 01. 04. 2017
Render Time: 6.038 sec.

Browser-Marktanteile