Schriftarten

Ziele

• Ich kenne die verschiedenen Familien von Schriftarten und kenne ihre Eigenheiten.
• Ich weiss, wie man Schriftarten in CSS einbindet und verstehe die Bedeutung von Fallback-Schriftarten.
• Ich kann CSS-Properties anwenden, um Text und Schriftarten zu stylen.

Arten von Schriftarten

Browser unterstützen mindestens diese 5 Familien von Schriftarten:

• Die wichtigste Unterscheidung ist zwischen Serif- und Sans-Serif-Schriftarten. Serif-Schriftarten haben Serife (also dünne Linien auf den Buchstabenlinien). Eine detailliertere Beschreibung findest du hier: https://de.wikipedia.org/wiki/Serife

• Sans-Serif-Schriftarten haben diese Serifen nicht.

• Bei Monospace-Schriftarten beanspruchen alle Buchstaben gleich viel Platz. Ein bekanntes Beispiel hierfür ist Consolas. Diese werden oft für Code verwendet.

• Kursive Schriftarten imitieren Handschrift.

• Fantasy-Schriftarten werden oft für kreative Zwecke eingesetzt.

Welche Schriftart tatsächlich im Browser angezeigt wird, hängt davon ab, welche Fonts auf dem jeweiligen System installiert sind. Unter Windows sind es für serifelose Schrift meisten Arial und Verdana, währen Linux Helvetica als Standard nutzt.

Schriftarten in CSS

Im CSS kannst du Schriftarten wie folgt einbinden:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

.p1 {
  font-family: "Times New Roman", Times, serif;
}
.p2 {
  font-family: Arial, Helvetica, sans-serif;
}
.p3 {
  font-family: "Consolas", monospace;
}
.p4 {
  font-family: "Lucida Handwriting", cursive;
}
.p5 {
  font-family: "Comic Sans MS", fantasy;
}

Als CSS-Property (=Eigenschaft) wird font-family verwendet. Dabei können mehrere Schriftarten übergeben werden, was auf Grund von Browser-Kompatibilität empfohlen wird. Die erste Schriftart ist die wichtigste. Sollte diese nicht geladen werden können, so wird die nächste Schriftart ausprobiert. Als Fallback kann man dann serif, sans-serif, monospace, cursive oder fantasy verwenden.

Weitere Informationen darüber kriegst du hier: https://www.w3schools.com/css/css_font.asp

Weitere Font-Eigenschaften

Text kann auf viele weitere Arten gestylt werden:

Auftrag

Im Rahmen der Semantic-Tags hast du ein HTML-Dokument erstellt.

Versuche alle Properties von dieser Seite auf deiner zu verwenden.