Schriftarten

Ziele

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

Arten von Schriftarten

Jeder Browser unterstützt mindestens die folgenden 5 Familien von Schriftarten:

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

• Sans-Serif-Schriftarten haben diese Serifs nicht.

• Bei Monospace-Schriftarten beanspruchen alle Buchstaben genau gleich viel Platz. Ein bekanntes Beispiel hierfür ist Consolas. Diese Schriftarten 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 serifenlose Schriftarten meist 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) für das Ändern der Schriftart wird font-family verwendet. Dabei können mehrere Schriftarten übergeben werden, was aufgrund unterschiedlicher Browser-Kompatibilitäten empfohlen wird. Die erste Schriftart ist die wichtigste und wird, sofern möglich, auch immer verwendet. Sollte diese nicht geladen werden können, so wird die nächste Schriftart verwendet. Als Fallback für den Fall, dass keine der angegebenen Schriftarten geladen werden kann, kann man serif, sans-serif, monospace, cursive oder fantasy verwenden.

Weitere Informationen darüber findest du auf dieser Seite: https://www.w3schools.com/css/css_font.asp

Weitere Font-Eigenschaften

Text kann auf viele weitere Arten gestylt werden:

Auftrag

Im Rahmen des Auftrags zu den Semantic-Tags hast du ein HTML-Dokument erstellt.

Versuche alle auf dieser Seite beschriebenen Properties in deinem HTML-Dokument zu verwenden.