Schriftformatierung im HTML
HTML-Webseite und die Schriftformatierung
Die bereits bekannten Elemente <h1>–<h6>, <p> und <pre> lassen sich auch mit einem weiteren Element nach Ihren Wünschen verändern und anpassen. Anstatt den Texten mittels physischer oder logischer Textauszeichnung ein bereits definiertes Aussehen zuzuweisen, können Sie mit Hilfe des <font>-Elements die Schriftgröße, die Schriftfarbe und die Schriftart individuell anpassen.
Wie schon erwähnt gilt das
<font>-Element als veraltet und sollte nicht mehr genutzt werden.
Da es zurzeit aber Bestandteil von HTML und in vielen Listings zu finden ist, habe ich mich entschlossen, es hier kurz zu erläutern. In Ihren Codes sollten Sie dann aber auf CSS zurückgreifen.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!-- Beispiel für Schriftformatierung -->
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-utf-8" />
<title>Schriftformatierung im HTML</title>
</head>
<body>
<h1>
<font face="sans-serif" size="7">
Schriftformatierung
</font>
</h1>
<p>
<font size="+1" color="blue" face="cursive">
Umformatierter Absatz mit größerer Schrift, blauer Farbe und einer Schreibschrift.
</font>
</p>
</body>
</html>
Abbildung zeigt eine Schriftformatierung im Safari.
Formatierung
Text landet in HTML, wie immer in einem Blockelement wie z.B. einem <div>-Block. Das gebräuchlichste Blockelement sind Absätze, also das <p>-Tag, wobei p für Paragraph (engl. für Absatz) steht.
Sie können entweder den gesamten Absatz oder auch nur Bereiche eines Textes formatieren. Für Teilformatierungen bieten sich eigene Formatiertags wie <b> für fetten Text an. Wollen Sie per CSS formatieren, greifen Sie zum <span>-Tag, um einen Textbereich zu markieren.
Schrift
Für die Schriftformatierung gab es früher, also vor der Einführung von CSS, das so genannte <font>-Tag. Dies sollten Sie aus zwei Gründen nicht mehr verwenden:
- Zum einen ist es vom HTML-Gralshüter W3C als deprecated, also nicht mehr empfohlen gekennzeichnet.
- Zum anderen kommt wirklich jeder relevante Browser mit den viel besseren CSS-Befehlen zur Schriftformatierung zurecht.
Die wichtigste Schriftformatierung ist sicherlich die Schriftart, denn sie hat vielleicht die größte Auswirkung auf das optische Erscheinungsbild.
Bei der Schriftart gibt es im Web eine große Einschränkung: Der Nutzer muss die Schrift besitzen, die Sie verwenden. Sie haben also nicht die freie Wahl aus allen auf Ihrem System installierten Schriften, sondern Sie müssen eine der auf (fast) allen Systemen vorhandenen Schriften wie Times New Roman, Arial, Helvetica, Verdana, Tahoma, Courier etc. verwenden.
Die Schriftart geben Sie in CSS mit dem Befehl font-family an. Sie können mehrere Schriftarten durch Kommata getrennt angeben. Der Browser sucht dann nach der ersten; findet er sie nicht, nimmt er die zweite und so weiter. Außer einer Schriftart können Sie auch eine Schriftfamilie nehmen. Das ist eine bestimmte Art von Schriften. Die genaue Schrift legt dann der Browser bzw. das System fest. Tabelle zeigt die möglichen Schriftfamilien.
| Schriftfamilie | Schriften | Beschreibung |
|---|---|---|
sans-serif |
Helvetica, Arial, Verdana, Geneva | Schriften ohne Serifen, das heißt keine Verästelungen an den Enden der Buchstaben |
serif |
Times New Roman, Garamond, Georgia | Schriftart mit Serifen |
monospace |
Courier, Everson Mono | diktengleiche Schriftarten; alle Buchstaben sind gleich breit |
cursive |
Snell Roundhand, Adobe Poetica | handschriftenähnlich, mit verbundenen Buchstaben oder anderen kursiven Charakteristika |
fantasy |
Cottonwood, Alpha Geometrique | außergewöhnliche Schriften z.B. mit Symbolen oder für spezielle Einsatzzwecke |
Hier ein Beispiel für das Festlegen von Schriftarten:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!-- font_family.html -->
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-utf-8" />
<title>Schriftart</title>
</head>
<body>
<p style="font-family: Verdana, Arial, Helvetica, sans-serif;">
Text mit serifenloser Schrift.
</p>
<p style="font-family: Courier, monospace;">
Diktengleiche Schrift z.B. für Quellcode-Darstellung.
</p>
</body>
</html>
