Eigenschaft font-size

Die Eigenschaft font-size legt die Größe der Schrift des Textes fest. Als Wert der Eigenschaft dienen beliebige Einheiten für Größen (in der Regel sind dies px, em oder rem) oder spezielle Schlüsselwörter (welche äußerst selten verwendet werden).

Syntax

Selektor {
	font-size: Wert;
}

Werte als Schlüsselwörter

Wert	Beschreibung
`xx-small`	Der aller-, aller kleinste. Beispiel: Lorem ipsum dolor sit amet.
`x-small`	Der aller kleinste. Beispiel: Lorem ipsum dolor sit amet.
`small`	Klein. Beispiel: Lorem ipsum dolor sit amet.
`medium`	Mittel. Beispiel: Lorem ipsum dolor sit amet.
`large`	Groß. Beispiel: Lorem ipsum dolor sit amet.
`x-large`	Sehr groß. Beispiel: Lorem ipsum dolor sit amet.
`xx-large`	Der aller größte. Beispiel: Lorem ipsum dolor sit amet.
`larger`	Größer als die Schrift des Elternelements um einen bestimmten Wert.
`smaller`	Kleiner als die Schrift des Elternelements um einen bestimmten Wert.

Standardwert: medium.

Beispiel

Legen wir für Absätze die Schriftgröße auf 20px fest:

<p>
	Lorem ipsum dolor sit amet.
</p>

p {
	font-size: 20px;
}

Beispiel

In diesem Beispiel ist für den Absatz eine Größe von 16px festgelegt, und für das span darin - 150%. In diesem Fall beträgt die Schriftgröße für span 150% von seinem Elternelement, also dem Absatz, und seine tatsächliche Größe beträgt 16px * 150% = 24px:

<p>
	Lorem <span>ipsum dolor</span> sit amet.
</p>

p {
	font-size: 16px;
}
span {
	font-size: 150%;
}

Beispiel

In diesem Beispiel ist für den Absatz eine Größe von 16px festgelegt, und für span darin - larger. In diesem Fall ist die Schriftgröße für span größer als die seines Elternelements (Absatz):

<p>
	Lorem <span>ipsum dolor</span> sit amet.
</p>

p {
	font-size: 16px;
}
span {
	font-size: larger;
}

Beispiel

Beachten Sie, dass Schriften mit unterschiedlicher font-family und gleicher font-size visuell überhaupt nicht die gleiche Größe haben können (zur Lösung dieses Problems siehe die Eigenschaft font-size-adjust).

Im folgenden Beispiel ist für beide Absätze font-size auf 16px gesetzt, aber mit unterschiedlicher font-family:

<p id="elem1">
	Lorem ipsum dolor sit amet.
</p>
<p id="elem2">
	Lorem ipsum dolor sit amet.
</p>

#elem1 {
	font-size: 16px;
	font-family: Arial;
}
#elem2 {
	font-size: 16px;
	font-family: "Times New Roman";
}