HTML - Schriftarten Referenz

Hallo, angehende Web-Entwickler! Heute tauchen wir ein in die wunderbare Welt der HTML-Schriftarten. Als dein freundlicher Nachbarschafts-EDV-Lehrer freue ich mich darauf, dich auf dieser Reise zu führen. Denke daran, genau wie das Auswählen des richtigen Outfits für einen besonderen Anlass, kann die Auswahl der perfekten Schriftart deine Webseite zum Strahlen bringen!

HTML - Fonts Reference

Syntax

Lassen wir mit den Grundlagen beginnen. In HTML verwenden wir den <font>-Tag, um die Schriftart, Größe und Farbe des Textes anzugeben. Es ist jedoch wichtig zu beachten, dass dieser Tag in HTML5 veraltet ist, was bedeutet, dass er nicht mehr empfohlen wird. Aber keine Sorge! Wir werden ihn aus historischem Kontext lernen und dann moderne Alternativen erkunden.

Die grundlegende Syntax sieht so aus:

<font face="schriftenfamilie" size="größe" color="farbe">Hier steht der Text</font>

HTML-Schriftarten-Tag

Nun zerlegen wir die Attribute des <font>-Tags:

face: Dies gibt die Schriftfamilie an.
size: Dies setzt die Schriftgröße. Der Wert kann von 1 (kleinste) bis 7 (größte) reichen.
color: Dies bestimmt die Farbe des Textes.

Hier ist ein Beispiel:

<font face="Arial" size="5" color="blau">Willkommen auf meiner Webseite!</font>

Dies wird "Willkommen auf meiner Webseite!" in Arial-Schrift, Größe 5 und blauer Farbe anzeigen.

Web-sichere Schriftarten

Web-sichere Schriftarten sind Schriftarten, die auf verschiedenen Betriebssystemen commonly verfügbar sind. Die Verwendung dieser Schriftarten stellt sicher, dass dein Text für die meisten Benutzer wie vorgesehen angezeigt wird. Hier ist eine Tabelle mit einigen beliebten web-sicheren Schriftarten:

Schriftart Name	Beispiel
Arial	Der schnelle braune Fuchs springt über den faulen Hund
Verdana	Der schnelle braune Fuchs springt über den faulen Hund
Helvetica	Der schnelle braune Fuchs springt über den faulen Hund
Times New Roman	Der schnelle braune Fuchs springt über den faulen Hund
Courier	Der schnelle braune Fuchs springt über den faulen Hund

Beispiel für HTML-Schriftarten

Lassen wir unsere Kenntnisse mit einem unterhaltsamen Beispiel in die Praxis umsetzen:

<html>
<head>
<title>Meine Lieblingsfrüchte</title>
</head>
<body>
<h1><font face="Arial" color="rot">Meine Lieblingsfrüchte</font></h1>
<p><font face="Verdana" size="4" color="grün">Äpfel sind lecker!</font></p>
<p><font face="Courier" size="3" color="orange">Orangen sind saftig!</font></p>
<p><font face="Times New Roman" size="5" color="lila">Trauben sind süß!</font></p>
</body>
</html>

In diesem Beispiel haben wir eine Seite über unsere Lieblingsfrüchte erstellt. Jede Frucht wird mit einer anderen Schriftart, Größe und Farbe beschrieben. Dies zeigt, wie du Schriftarten verwenden kannst, um eine visuelle Hierarchie und Betonung auf deinen Webseiten zu schaffen.

Schriftarten für Microsoft-Systeme

Microsoft-Systeme kommen mit einer Vielzahl von vorinstallierten Schriftarten. Hier sind einige beliebte:

Arial
Calibri
Cambria
Georgia
Tahoma
Times New Roman

Schriftarten für Macintosh-Systeme

Macintosh-Systeme haben ebenfalls ihre eigenen Standard-Schriftarten:

Helvetica
Arial
Times New Roman
Courier
Verdana
Georgia

Schriftarten für Unix-Systeme

Unix-Systeme, einschließlich Linux-Distributionen, enthalten oft diese Schriftarten:

DejaVu Sans
Liberation Sans
FreeSans
Nimbus Sans L

Nun, ich weiß, was du denkst: "Aber Lehrer, du hast gesagt, der <font>-Tag ist veraltet. Was sollen wir stattdessen verwenden?" Tolle Frage! In der modernen Webentwicklung verwenden wir CSS (Cascading Style Sheets), um unseren Text zu gestalten. Hier ist ein schnelles Beispiel:

<html>
<head>
<title>Modernes Schriftarten-Styling</title>
<style>
h1 {
font-family: Arial, sans-serif;
color: rot;
}
.grün-text {
font-family: Verdana, sans-serif;
font-size: 18px;
color: grün;
}
.orange-text {
font-family: 'Courier New', monospace;
font-size: 16px;
color: orange;
}
.lila-text {
font-family: 'Times New Roman', serif;
font-size: 20px;
color: lila;
}
</style>
</head>
<body>
<h1>Meine Lieblingsfrüchte</h1>
<p class="grün-text">Äpfel sind lecker!</p>
<p class="orange-text">Orangen sind saftig!</p>
<p class="lila-text">Trauben sind süß!</p>
</body>
</html>

Dies erreicht das gleiche Ergebnis wie unser vorheriges Beispiel, aber verwendet moderne CSS-Techniken anstelle des veralteten <font>-Tags.

Denke daran, die richtige Schriftart auszuwählen ist wie das Herauspicken des perfekten Gewürzes für dein Gericht - es kann deine Webseite zum Leuchten bringen! Aber immer an Lesbarkeit denken. Eine schicke Schriftart mag cool aussehen, aber wenn deine Nutzer sie nicht lesen können, erfüllt sie ihren Zweck nicht.

Als wir uns dem Ende nähern, möchte ich eine kleine Geschichte teilen. Als ich zum ersten Mal Webentwicklung machte, wurde ich so aufgeregt über Schriftarten, dass ich für jeden Absatz auf meiner Seite eine andere Schriftart verwendete. Es sah aus wie ein Lösegeldbrief! Lerne aus meinem Fehler - Konsistenz ist der Schlüssel.

Weiters üben, neugierig bleiben und viel Spaß beim Programmieren!

Credits: Image by storyset

Vorheriges Tutorial:

HTML - Ereignisreferenz

Nächstes Tutorial:

HTML - ASCII-Codes