André Leopold (Homepage) : HTML - Indexseite : Die Tücken des FONT Elements
HTML

Die Tücken des FONT Elements

0. Inhaltsverzeichnis

  1. Warum wird ein FONT Element überhaupt verwendet?
  2. Die Syntax des FONT Elements
  3. Und wo ist nun das Problem?
  4. Und wie umgeht man diese Probleme?

 

1. Warum wird ein FONT Element überhaupt verwendet?

Das FONT Element wurde dazu geschaffen, um es Webautoren zu erlauben, Einfluß auf die graphische Präsentation ihrer Dokumente zu ermöglichen. Diese kann über drei Wege geschehen:

  1. Man kann die Schriftgröße beeinflussen.
  2. Man kann die Schriftart beeinflussen.
  3. Man kann die Schriftfarbe beeinflussen.

Geschaffen wurde das FONT Element allerdings nicht vom W3C, sondern von Netscape (SIZE und COLOR). Microsoft fügte später noch das FACE Attribut hinzu, und die beiden Hersteller nahmen die neue Syntax des anderen Herstellers in ihre eigenen Implementationen mit auf, und irgendwann fühlte sich das W3C wohl auch gezwungen, dies mit in seine HTML Spezifikationen aufzunehmen. Die genaue Spezifikation findet man in der HTML 4.0 Recommendation des W3C. Das FONT Element zählt aber für HTML 4.0 schon als "deprecated".

Die entsprechende Syntax ist sehr einfach, und leicht zu beherrschen - auf den ersten Blick. Die Gefahr liegt jedoch im Detail, und unter Umständen können auf diese Weise katastrophale Ergebnisse entstehen, die Seiten, oder Teile von ihnen, für einen Leser unnutzbar machen, wie im folgenden gezeigt wird.

2. Die Syntax des FONT Elements

Wie schon bereits erwähnt, ist die Syntax des FONT Elements sehr einfach. Es gibt drei Attribute für das FONT Element, COLOR, FACE und SIZE.

COLOR

Als Wert wird hier eine Farbe im Format "#RRGGBB" angegeben, also zum Beispiel

COLOR = "#000080" für Navyblau,
COLOR = "#4B0082" für Indigo.

FACE

Als Wert wird mindestens eine Schriftart angegeben, zum Beispiel

FACE = "Arial, Helvetica" oder
FACE = "Times New Roman"

Im ersten Fall wird der Font Arial benutzt. Sollte dieser nicht vorhanden sein, überprüft der Browser, ob es einen Font namens Helvetica gibt. Falls ja, wird dieser benutzt, falls nicht, wird der Standardfont des Browsers verwendet.

Im zweiten Fall wird überprüft, ob es einen Font Times New Roman gibt, falls ja, wird dieser verwendet, falls nicht, ist wieder die Standardschriftart des Browsers am Zuge.

SIZE

Hier gibt es zwei Möglichkeiten. Ist das Argument eine natürliche Zahl (ohne irgendwelche Vorzeichen), so wird das Argument als absolute Angabe gewertet. Erlaubt sind Werte zwischen 1 und 7, wobei nicht alle Browser alle 7 Werte auch tatsächlich unterschiedlich darstellen müssen. Standard ist in der Regel die Größe 3.

Die zweite Möglichkeit ist die Angabe einer relativen Änderung. Dies wird erreicht, in dem man vor die Zahl noch ein plus oder minus-Zeichen setzt. So würde

SIZE = "-1"
die Fontgröße auf die nächstkleinere Schriftart setzen, und
SIZE = "+2"
die Fontgröße um zwei Stufen erhöhen.

Man kann natürlich auch alle Attribute miteinander kombinieren, so daß zum Beispiel mit

<FONT SIZE="+2" FACE="Verdana" COLOR="#C0C0C0">[text]</FONT>

der Browser des Lesers den enthaltenen Text um zwei Schriftgrößen vergrößert, als Schriftart Verdana, sofern vorhanden, benutzt, und Silber als Farbe wählt.

3. Und wo ist nun das Problem?

Es gibt verschiedene Probleme. So hat der Leser oft keine Möglichkeit (speziell bei Browsern der Firma Netscape bis einschließlich Version 4), die Verwendung des FONT Elements auszuschalten. Aus diesem Grunde können unvorteilhafte Darstellungen nicht abgeschaltet werden. Unvorteilhafte Darstellungen können sich zum Beispiel ganz offensichtlich aus der Verwendung des COLOR Attributs ergeben.

Der Leser mag zum Beispiel als Standardeinstellung seines Browsers weiße Schrift auf schwarzem Grund gewählt haben, und dies als Standardeinstellung benutzen, egal, was die Webseite für Farben im BODY Element, oder in einem Stylesheet, angibt. Wenn er nun mit diesen Einstellung auf eine Seite geht, die im BODY Element schwarze Schrift auf weißem Grund definiert, dann ist das erst einmal kein Problem, da der Browser sowohl die Schriftfarbe als auch den Hintergrund ignoriert, und stattdessen seine eigenen Einstellungen verwendet[1].

Nun mag der Webautor aber an anderer Stelle ein paar farbliche Hervorhebungen einfügen wollen, indem er zum Beispiel bestimmte Textstellen nicht mit schwarz, sondern dunkelgrau schreibt. Da man im FONT Element aber keine Hintergrundfarbe mitdefinieren kann, und der Browser somit nur die Textfarbe setzt, erhält der Leser dunkelgraue Schrift auf schwarzem Hintergrund. Am extremsten wird das Problem, wenn die Standardeinstellung des Browsers des Lesers nicht weiß auf schwarz, sondern weiß auf dunkelgrau ist, denn dann hat er nun dunkelgraue Schrift auf dunkelgrauem Hintergrund.

Als nächstes betrachten wir das FACE Attribut. Auch hier gibt es für den Leser oft, je nach Browser, keine Möglichkeit, dies zu überschreiben. Besonders große Probleme ergeben sich, wenn der Autor einen Font benutzt, den es auf seinem System gibt, der aber etwas exotisch ist. Der Autor wird dabei sicherlich den Hintergedanken, "Diejenigen, die den Font nicht haben, sehen nur ihren Standardfont, und haben aber keine Probleme", übersieht dabei aber, daß es auf anderen Systemen einen Font mit gleichem Namen, aber ganz anderer Bedeutung geben mag (zum Beispiel ein Symbolfont). Das Ergebnis wäre auch hier eine unleserliche Seite.

Letztendlich gibt es noch das SIZE Attribut. Auch hier wird impliziert, daß die Schriftarten auf den verschiedenen Systemen erst einmal gleich groß aussehen, und Größenveränderungen dann so aussehen, wie sie auch beim Test durch den Autoren aussehen. Dies ist erst einmal ganz objektiv unmöglich. Vergleicht man zum Beispiel die Schriftarten auf verschiedenen Systemen, indem man eine gleiche Schriftart zum Beispiel auf 14 Punkt Größe setzt, wird man von System zu System schon Unterschiede erkennen. Auf Windowssystemen würde der FONT wahrscheinlich am größten dargestellt werden. Grund hierfür ist die Definition der Umsetzung der Größe auf dem Schirm, bei Windows hat man sie so definiert, daß die Schrift für einen Leser im optimalen Abstand vom Monitor als 14 Punkt erscheint. Im Gegensatz dazu definierte man es bei Macintosh so, daß die Schrift auf dem Monitor selbst als 14 Punkt erscheint. Bei UNIX Systemen ist eine 14 Punkt Schrift dann noch kleiner.

Weiterhin weiß der Webautor nichts über persönliche Bedürfnisse des Lesers. So mag es für einen Leser mit Augenproblemen dringend notwendig sein, die Standardschriftgröße auf 20 Punkt zu setzen, damit er die Texte gut lesen kann. Wenn nun eine relative Größenänderung von "+4" ankommt, dann würde die Schrift selbst für diesen Leser zu groß, und das Dokument wäre, mit sehr wenig Buchstaben pro Bildschirm, unleserlich. Auf der anderen Seite findet man oft relative Größenänderungen von "-3", bei denen der Autor "die kleinste Schriftgröße" vorgeben möchte. Bei den meisten Einstellungen, d.h. mit "normaler" Schriftgröße, gibt es zwischen "-2" und "-7" keine Unterschiede mehr. Nicht aber für den Nutzer mit den Augenproblemen, für ihn mag es zwischen "-2" und "-7" durchaus noch Unterschiede geben, mit dem Effekt, daß er die "-7" Schrift gar nicht mehr lesen kann. Auch beim SIZE Attribut gilt, daß ein Leser dies ohne weiteres nicht überschreiben kann. In der Regel sind Änderungen um ±1 kein Problem, allerdings gibt es hierfür sowieso die Elemente SMALL und BIG.

4. Und wie umgeht man diese Probleme?

Die beste Lösung ist in der Tat, kein FONT Element zu benutzen. Das heißt aber nicht, daß Webseiten gänzlich farblos sein müssen, im Gegenteil. Mit den fortschreitenden Spezifikationen des W3C gibt es Möglichkeiten, durch die Nutzung von Cascading Style Sheets, vernünftige Angaben zu machen, die der Benutzer auch wieder überschreiben kann, und die alles übertreffen, was FONT erreichen kann. Möchte man zum Beispiel, wie oben angegeben, einen Text mit dunkelgrauer Schrift hervorheben, dann kann man das mit einem Stylesheet folgendermaßen machen:

<SPAN STYLE="color:#a9a9a9; background: #000;">[text]</SPAN>

Ein Stylesheet, daß man im Kopf einer Webseite (noch komfortabler sind in der Tat externe Stylesheets, die dann nur noch mit dem LINK Element eingebunden werden), erleichtert auch das Editieren von Webseiten. Hat man zum Beispiel eine Seite,

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<STYLE TYPE="text/css">
<!--
BODY { background: #000; color: #fff;}
.HIGHLIGHT {background: #000; color: #999999;}
-->
</STYLE>
</HEAD>

<BODY>
<H1>Das ist eine Überschrift</H1>
<H2 CLASS="HIGHLIGHT">Das ist eine hervorgehobene Überschrift</H2>
Das ist ist Text
<SPAN CLASS="HIGHLIGHT">Das ist hervorgehobener Text</SPAN>
</BODY>
</HTML>

dann kann man alle Hervorhebungen durch die Angabe von CLASS="HIGHLIGHT" (in jedem Element) definieren. Wollte man nun die Farbe der Hervorhebung ändern, müßte man die Änderungen nicht mehr an jedem einzelnen FONT Element durchführen, sondern bräuchte nur die Styledefinitionen im HEAD Element zu ändern. Mehr über Stylesheets erfährt man, neben oben genannten Links, auch unter HTML Help Style Sheet Guide und dem HTML Writers Guilde Style Sheet FAQ. Außerdem gibt es noch eine Übersicht, welche Teile der CSS1 Spezifikation von den größten drei CSS1 fähigen Browsern (Netscape 4, MSIE3, MSIE4) unterstützt werden.


1 Würde im BODY Element nur der Hintergrund, aber nicht der Text (oder umgedreht) definiert sein, und würde der Browser des Lesers nicht alles selbstständig überschreiben, sondern nur die Dinge, die nicht von der Webseite vorgegeben wurde, dann stünde man schon hier vor einem Problem, da man so sehr leicht mit schwarzer Schrift auf schwarzem Grund endet. Das ist auch der Grund, warum man im BODY Element immer alle fünf Farbattribute (TEXT, BGCOLOR, LINK, VLINK und ALINK) definieren sollte, sofern man mindestens eins davon sowieso definieren möchte. (zurück zum Verweiser auf diese Fußnote)


Referenzen:
HTML Themen
HTML 4.0 Working Draft des W3C
FONT Spezifikation der HTML 4.0 Recommendation
CSS1 Recommendation