Schriftfamilie

In dieser Lektion kümmern wir uns um den Text auf unserer Seite: seine Schrift, Größe, Stärke, seinen Zeilenabstand und seine Ausrichtung.

Aus dem HTML-Kurs kennst du die Elemente strong und em. Sie geben Text eine Bedeutung: strong kennzeichnet wichtigen Text und em betonten Text. Browser zeigen sie standardmäßig fett und kursiv an, aber wie Text aussieht, ist Aufgabe von CSS. Mit CSS können wir jeden Text fett oder kursiv machen oder ändern, wie strong und em aussehen.

Die Schrift legen wir mit der Eigenschaft font-family fest. Eine Schriftfamilie ist eine Schriftart mit allen ihren Varianten: Die Familie Arial hat zum Beispiel eine normale, eine fette, eine kursive und eine fett kursive Variante. Ein Browser kann nur Schriften verwenden, die auf dem Gerät des Besuchers installiert sind (oder Schriften, die mit der Seite heruntergeladen werden, dazu kommen wir am Ende dieser Lektion). Deshalb ist der Wert von font-family eine Liste von Schriften, durch Kommas getrennt: Der Browser verwendet die erste Schrift der Liste, die er hat.

p {
	font-family: Verdana, Arial, sans-serif;
}

Hier versucht der Browser zuerst Verdana. Ist Verdana auf dem Gerät nicht installiert, versucht er Arial. Fehlt auch Arial, verwendet er seine Standard-Schrift ohne Serifen.

sans-serif ist nicht der Name einer Schrift, sondern einer generischen Familie: einer ganzen Art von Schriften. Ein Browser hat für jede generische Familie eine Schrift, deshalb beenden wir die Liste immer mit einer. Die wichtigsten generischen Familien sind:

• serif: die Buchstaben haben an ihren Enden kleine Striche (Serifen), wie in Büchern,
• sans-serif: Buchstaben ohne Serifen, schlicht und klar,
• monospace: alle Buchstaben sind gleich breit, wie in Code.

Enthält ein Schriftname Leerzeichen, schreibt man ihn am besten in Anführungszeichen: "Times New Roman". Setze eine generische Familie aber nie in Anführungszeichen: "sans-serif" in Anführungszeichen bedeutet eine Schrift namens sans-serif, und die gibt es nicht.

Die Schrift wird vererbt, also legen wir sie für body fest, und aller Text der Seite bekommt sie. Dann können wir einigen Elementen, etwa Überschriften, eine andere Schrift geben.