Mahlzeit!

Verzeiht mir die kleine Verspätung aber hier nun Türchen Nummer vier, hinter dem sich heute font-variant verbirgt. Schade eigentlich, dass font-variant so selten benutzt wird, es ist ein schöner Effekt besonders für Überschriften oder Einleitungen, aber dazu gleich mehr.

Browserunterstützung

Browser
ab Version	1.0	1.0	3.5	1.0	4.0

font-variant gibt es schon ewig und wird von allen Browsern problemlos unterstützt. Es stehen uns drei Werte zur Auswahl, von denen meistens nur einer wirklich gebraucht wird.

1. normal, Default-Wert, muss nicht zwingend angegeben werden
2. small-caps, damit lässt sich Text manipulieren: Kleinbuchstaben werden zu Großbuchstaben, verändern aber (im Gegensatz zu text-transform) ihre Höhe nicht
3. inherit, übernimmt den Wert für diese Eigenschaft vom Elternelement

Beispiel

Es ist unschwer zu erkennen, dass wir uns hier nur den Wert small-caps genauer ansehen wollen. Wie gesagt, der Text wird manipuliert und Kleinbuchstaben werden zu.. kleinen Großbuchstaben, “Small Capitals” eben. Zunächst ein Beispieltext:

HTML

1
2

<h3>Überschrift des Textes</h3>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>

Ohne font-variant kommt das dabei raus:

Jetzt wollen wir der Überschrift sagen, dass sie small-caps benutzen soll, das können wir entweder direkt über font-variant machen oder aber in Kurzschreibweise als Teil der font Property.

CSS font-variant

1
2
3
4
5
6
7

h3 {
	font-family:georgia,serif;
	font-size:22px;
	font-variant:small-caps;
	font-weight:normal;
	line-height:30px;
}

ODER als Teil von font

1
2
3

h3 {
	font:small-caps normal 22px/30px georgia,serif;
}

In beiden Fällen sieht unser Text dann so aus..

Je nach Schriftart kann es von Vorteil sein auch noch etwas letter-spacing hinzuzufügen, um die Lesbarkeit zu erhöhen. Prinzipiell macht aber eine solche Überschrift schon etwas mehr her und zieht die Blicke auf sich. Dabei wirkt sie aber nicht so aufdringlich wie eine Überschrift, die nur mit (großen) Großbuchstaben geschrieben wurde.