Fonts in Webseiten als Text
1. "Font Face" Tag
Die einfachste Art die Schriftart in HTML zu wechseln ist der Font Face Tag:<font face="Arial, Helvetica"> lorem ipsum... </font><font face=...> bestimmt die Schriftart (font face = Schriftart). Dahinter folgt, in Anführungszeichen, die Angabe einer oder mehrerer Schriftarten. Wenn Sie mehrere Schriftarten angeben, trennen Sie die Schriftartnamen durch Kommata. Mit </font> beenden Sie den Abschnitt mit anderer Schriftart.
Bei mehreren angegebenen Schriftarten versucht der Brauser zuerst, den Text in der ersten angegebenen Schriftart darzustellen (im Beispiel in Arial). Wenn diese Schrift beim Anwender nicht installiert ist, wird versucht, die zweite angegebene Schrift (im Beispiel Helvetica) zu nehmen. Wenn keine der angegebenen Schriftarten beim Anwender darstellbar ist, bleibt die Angabe wirkungslos, d.h. der Text wird in der vom Anwender eingestellten Schrift angezeigt.
Achten Sie darauf, dass Sie exakte Schriftartnamen verwenden, also z.B. "Comic Sans MS". Unter Windows können Sie eingestellte Schriftarten und ihre genauen Namen beispielsweise über die Systemsteuerung ermitteln.
Innerhalb von Tabellen müssen Sie die Angabe zur Schriftart in jeder einzelnen Tabellenzelle wiederholen, wenn alle Tabellenzellen die gleiche spezielle Schriftart haben sollen.
Den Font Face Tag sollten Sie nach Möglichkeit nicht mehr verwenden, da er nicht mehr offizieller Bestandteil von HTML 4.0 ist. Er wird aber weiterhin von allen gängigen Browsern interpretiert.
2. Cascading Styles im HTML-Tag
Mit Cascading Styles definieren Sie den zu verwendenden Font in einer Erweiterung eines Tags um den Text herum:<div style="font-family:Arial, Helvetica;"> lorem ipsum... </div>Wichtig dabei ist, dass Sie diese Styledefinitionen beliebig schachteln können (Cascade). Ansonsten gilt alles für den Font Face Tag Gesagte.
3. Cascading Styles im HTML-Header
Statt für jeden einzelnen Tag die Styles festzulegen, können Sie diese auch zentral im Header der HTML-Datei definieren:
<head>
<style type="text/css">
.hudel {font-family:Gill Sans;}
</style>
</head>
......
<div class="hudel"> lorem ipsum... </div>
Sinnvoll ist das allerdings nur wenn Sie z.B. nur eine einzige Datei haben, ansonsten sollten Sie die in Punkt 4. beschriebene Methode verwenden.
4. Cascading Styles in externer Datei
Hierbei werden alle Style Definitionen in einer externen Datei verwaltet. Der Vorteil liegt darin, dass Sie alle benötigten Stile nur ein einziges Mal definieren müssen. Die StyleSheet Datei hat normalerweise die Endung .CSS:CSS-Datei:
p, li, td, input, select {font-family:Verdana,Arial,Helvetica,Sans Serif;}
.hudel {font-family:Garamond,Times;}
HTML-Datei:
<head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head> ...... <p> lorem ipsum... </p> <div class="hudel"> lorem ipsum... </div>Wie Sie sehen können Sie so auch HTML Standard Tags umdefinieren und somit z.B. alle Zelleninhalte einer Tabelle in einer bestimmten Schriftart anzeigen lassen (im Gegensatz zum Font Face Tag, bei dem Sie jedes Tabellenfeld einzeln definieren müssten.)
Durch die konsequente Verwendung von StyleSheets bekommen HTML-Seiten nicht nur ein einheitliches Layout, sondern werden auch in ihrem Umfang viel kleiner, da alle Informationen über die Gestaltung des Textes in einer Datei ausgelagert sind
Da Sie über Styles nicht nur die Schriftart, sondern auch die Schriftfarbe, Schriftschnitt etc. einstellen können, können Sie, durch einfaches Austauschen der StyleSheet Datei bzw. umdefinieren einiger Styles, einer kompletten Website in kürzester Zeit ein unterschiedliches Outfit geben!
5. Embedded Fonts
Downloadbare Schriftarten(Embedded Fonts) werden nicht im Sinne des jeweiligen Betriebssystems beim Anwender installiert, sondern direkt in Webseiten als Referenz auf eine Schriftartendatei mit eingebunden. Jeder Brauser, der downloadbare Schriftarten interpretiert, erkennt solche Schriftarten und stellt sie am Anwenderbildschirm perfekt dar. Dazu wird die Schriftartendatei zusammen mit der HTML-Datei auf den Anwenderrechner übertragen. Sie wird jedoch nach derzeitigem Stand nicht auf dem System des Benutzers installiert, sondern bleibt nur für die Anzeige der betroffenen Webseiten im Arbeitsspeicher des Anwenders. Der Brauser kann die Schriftartendaten interpretieren und stellt Texte, die in HTML mit dieser Schriftart formatiert sind, entsprechend dar.Leider gibt es hier, wie so oft bei Web-Standards, zwei inkompatible Lösungen: die eine stammt von Netscape/Bitstream mit dem Namen TrueDoc , die andere ist von Microsoft und nennt sich WEFT(Web Embedded Font Technology).
Für beide Lösungen gibt es je eine spezielle Software, die es HTML-Autoren erlaubt, Schriftarten in dem Dateiformat zu erstellen oder vorhandene herkömmliche Schriftarten wie TrueType- oder Adobe-Schriftarten in das neue Dateiformat zu konvertieren.
Da der Internet Explorer mittlerweile einen Marktanteil von gut 85% hat, vernachlässigen wir hier die Netscape/Bitstream Variante und konzentrieren uns auf Microsoft's WEFT.
Zuerst sollten Sie das WEFT Tool von der Microsoft Typography Homepage herunterladen. Mit diesem Tool erstellen Sie dann die einbettbare Schriftdatei (Endung .EOT = Embedded OpenType). Die eingebettete Schrift wird dann "ganz normal" über Cascading Styles angesprochen:
CSS-Datei:
@font-face {font-family:MyNewSuperFont;src:url(MYNEWSU0.eot);}
.hudel {font-family:MyNewSuperFont,Verdana,Sans Serif;}
HTML-Datei:
<head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head> ...... <div class="hudel"> lorem ipsum... </div>Erwähnenswert ist das WEFT und TrueDoc mit sogenannten Subsettings arbeiten, d.h. in der EOT-Datei befinden sich nur die Buchstaben/Zeichen, die tatsächlich auf Ihren Webseiten benutzt werden. Somit wird die Fontdatei merklich kleiner und die Ladezeiten verringern sich.
WEFT bietet darüberhinaus die Möglichkeit den eingebetteten Font an Ihre Webseite zu binden, d.h. die eingebettete Schriftart wird nur angezeigt, wenn der Benutzer die Seiten von Ihrer, beim Erstellen der Schriftdatei angegebenen, URL aufruft. Bei Aufrufen von anderen Domains aus (bspw. über Frames) wird die eingebettet Schrift nicht angezeigt.
© 2001-2024 by The Fontshack [CC BY] | v3.19a | Impressum