SELFHTML: Stylesheets / CSS-Eigenschaften / Schriftformatierung mit Schriftartendatei

SELFHTML/Navigationshilfen Stylesheets (CSS) CSS-Eigenschaften
	Schriftformatierung mit Schriftartendatei
	@font-face, src, font-family (Schriftformatierung mit Schriftartendatei) Schriftformate eingrenzen unicode-range (Unicode-Bereich eingrenzen) Weitere Angaben zur Schriftquelle

@font-face, src, font-family (Schriftformatierung mit Schriftartendatei)

Von diesen in CSS2 eingeführten Angaben wurde nur @font-face vom Internet Explorer und Netscape 4.x unterstützt. Da sie weder in den Mozilla-Nachfolgern noch in anderen aktuellen Browsern implementiert sind, gehören sie in CSS 2.1 nicht mehr zum Standard! Sie sollten also stets auch passende Alternativ-Schriftarten angeben, wenn Ihre Seiten nicht ausschließlich von Nutzern des Internet Explorer besucht werden (die die Schriftart-Installation bei hoher Sicherheitsstufe auch bestätigen).

Über @font-face können Sie für den Internet Explorer eine Schriftart definieren und dabei direkt die Daten-Ressourcen der gewünschten Schriftarten ansprechen, also bestimmte Schriftartendateien. Vorgesehen war außerdem, mit Hilfe spezieller Definitionen die Charakteristika der gewünschten Schriftart exakt beschreiben zu können. Beim Definieren der Schriftart vergeben Sie einen Namen für die Schriftart. Unter diesem Namen können Sie sie anschließend mit der Eigenschaft font-family verwenden.

Beispiel:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>font-face</title>
<style type="text/css">
 @font-face { font-family:Garamond; src:url(garamond.eot), url(garamond.pfr); }
</style>
</head>
<body>
<p style="font-family:Garamond">Text in Garamond</p>
</body></html>

Erläuterung:

Mit @font-face starten Sie die Angabe einer exakten Schriftart in einem style-Bereich. Dahinter folgen, in geschweiften Klammern, die Daten. Die beiden wichtigsten sind der Schriftartenname font-family und der URI der Schriftartendatei src:url(Datei).

Den Schriftartennamen vergeben Sie mit der Angabe font-family: innerhalb des @font-face-Bereichs. Unter diesem Namen können Sie die Schriftart in HTML verwenden. Im obigen Beispiel gibt es einen Textabsatz, der mit Hilfe einer Stylesheet-Angabe die zuvor definierte Schriftart erzwingt.

Die Schriftartendatei, die Sie für die zugehörigen font-family-Angaben bestimmen, geben Sie mit src:url(Datei) an. Wenn sich die Schriftartendatei im gleichen Verzeichnis befindet wie die HTML-Datei, genügt die Angabe des Dateinamens. Andernfalls müssen Sie die genaue Lage der Schriftartendatei entweder durch eine relative Pfadangabe oder durch eine absolute Adressierung vom Typ http://... angeben.

Im obigen Beispiel sehen Sie, dass gleich zwei URI-Angaben notiert sind. Einmal wird eine eot-Datei als Schriftartenquelle angegeben, einmal eine pfr-Datei. Beide Formate sind browser-spezifisch: eot-Dateien sind Schriftartendateien, die der Internet Explorer (ab Version 4) als Web-Schriftarten erkennt; pfr-Dateien sind Schriftartendateien, die Netscape 4.x erkannte. Wenn Sie Ihre gewünschte Schriftart auch für diesen veralteten Browser zur Verfügung stellen wollen, können Sie beide Formate so einbinden wie im obigen Beispiel.

Einzelheiten zu eot- und pfr-Schriftarten und wie Sie diese selbst erstellen können, finden Sie im Kapitel über Internationalisierung im Abschnitt Downloadbare Schriftarten.

Schriftformate eingrenzen

In CSS2 war vorgesehen, bei der Einbindung einer Schriftartendatei auch Angaben zu den möglichen Formateigenschaften der Schrift zu machen, wie z.B. zu Schriftstil (font-style), Schriftvariante (font-variant), Schriftgröße (font-size) oder Schriftgewicht (font-weight). So sollte dem Browser bereits in der HTML-Datei mitgeteilt werden, welche Formateigenschaften die Schriftartendatei unterstützt. Der Browser sollte die Schriftartendatei in desem Fall nur dann zum Anwender übertragen, wenn Formatierungen in der HTML-Datei die Übertragung sinnvoll machen.
Wegen mangelnder Browserunterstützung werden diese Angaben jedoch in CSS 2.1 nicht übernommen.

Beispiel:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>font-face</title>
<style type="text/css">
 @font-face { font-family:Garamond; src:url(garamond.eot); font-size:10pt,12pt,14pt; }
 @font-face { font-family:Garamond; src:url(garamond.pfr); font-size:10pt,12pt,14pt; }
</style>
</head><body>
<p style="font-family:Garamond; font-size:48pt">Text</p>
<!-- Datei wird nicht übertragen -->
</body></html>

Erläuterung:

Mit den dafür üblichen Stylesheet-Eigenschaften sollten bei der Definition einer Schriftart mit Schriftartendatei einschränkende Angaben zur Schrift gemacht werden können.

Folgende Besonderheiten sollten dabei beachtet werden:
Zu font-style, font-variant, font-weight und font-size konnten auch mehrere, durch Kommata getrennte Werte angegeben werden.
Bei font-weight waren die Angaben bolder und lighter nicht zulässig.
Bei font-size waren nur absolute Größenangaben und keine relativen wie Prozentangaben oder em-Angaben erlaubt.

unicode-range (Unicode-Bereich eingrenzen)

In CSS2 war vorgesehen, bei der Einbindung einer Schriftartendatei den Zeichenbereich einschränken zu können. So sollte dem Browser bereits in der HTML-Datei mitgeteilt werden, welchen Zeichenbereich die Schriftart unterstützt. Der Browser sollte die Schriftartendatei in desem Fall nur dann zum Anwender übertragen, wenn alle Zeichen eines Textes, der mit der Schriftart formatiert wird, innerhalb des definierten Unicode-Bereichs liegen.
Wegen mangelnder Browserunterstützung wird diese Eigenschaft jedoch in CSS 2.1 nicht übernommen werden.

Beispiel:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>unicode-range</title>
<style type="text/css">
 @font-face { font-family:System; src:url(system.eot); unicode-range:U+0000-007F; }
 @font-face { font-family:System; src:url(system.pfr); unicode-range:U+0000-007F; }
</style>
</head>
<body>
<p><tt style="font-family:System">Text mit ß und Ü</tt></p>
<!-- Datei wird nicht übertragen -->
</body>
</html>

Erläuterung:

Mit unicode-range: sollte der Zeichenbereich der Schriftartendatei vor dem Download bekannt gemacht werden. Im obigen Beispiel wird der Bereich U+0000-007F definiert. Das entspricht dem ASCII-Zeichenvorrat. Wenn nun in einem Bereich, der diese Schriftart benutzt, beispielsweise Umlaute oder andere Zeichen vorkommen, die nicht im ASCII-Zeichenvorrat vorkommen, sollte die Schriftartendatei nicht heruntergeladen werden.

Unicode-Angaben beginnen immer mit U+. Dahinter folgt eine Angabe der gewünschten Zeichennummer in hexadezimaler Form. Um einen Bereich zu definieren, der aus mehreren Unicode-Zeichen besteht, können Sie als Platzhalterzeichen (Wildcard) ein Fragezeichen ? benutzen. Bei einer Angabe wie unicode-range:U+00?? bewirken die zwei hintereinanderstehenden Fragezeichen am Ende der Angabe, dass der gewünschte Unicode-Bereich 16 hoch 2, also 256 Zeichen ab dem Zeichen U+00 beträgt. Da laut Unicode-System bei U+0000 die Zeichen des der Latin-1-Codetabelle beginnen, die 256 Zeichen umfasst, deckt die Angabe in dem Beispiel genau diesen Zeichenvorrat ab. Wenn Sie einen beliebigen Unicode-Bereich bestimmen möchten, können Sie dies mit einer Angabe tun wie z.B. U+AC00-D7FF

Weitere Angaben zur Schriftquelle

Die Version 2.0 der CSS-Sprache stellte einige Stylesheet-Angaben bereit, um Schriftartenquellen möglichst vielfältig definierbar und auffindbar zu machen, die wegen mangelnder Browserunterstützung jedoch in CSS 2.1 nicht übernommen werden.

Beispiel:

<style type="text/css">
 @font-face { font-family:Kino; src:local(Kino MT), url(kino.ttf) format(TrueType); }
 @font-face { font-family:MeineArt; url(http://www.example.org/cgi-bin/myfont.pl) format(intellifont) }
 @font-face { font-family:Alabama; url(alab.fon); panose-1: 2 4 5 2 5 4 5 9 3 3; }
</style>

Erläuterung:

Browser sollten zuerst auf dem Rechner des Anwenders nach der gewünschten Schriftart suchen und eine auf dem Server bereit liegende Schriftart nur dann herunterladen, wenn die Schriftart lokal nicht verfügbar ist. Dazu sollte bei der Quellenangabe der Schriftartendatei (src:) zuerst local und dahinter in Klammern der gewünschte Schriftartenname notiert werden. Für den Fall, dass der Browser diese Schriftart beim Anwender nicht findet, war durch ein Komma getrennt die Schriftartendatei auf der Internetseite anzugeben - im Beispiel url(kino.ttf).

Es sollten ferner Angaben zum Format der Schriftart gemacht werden können. Der Browser sollte die Schriftartendatei in diesem Fall nur dann herunterladen, wenn sie auf dem Rechner des Anwenders ausführbar ist. Dazu war die Angabe format() zu notieren, durch ein Leerzeichen getrennt von den Angaben zu src:local() und/oder src:url(). Innerhalb der Klammern sollte das Format der Schriftartendatei angeben werden. Im obigen Beispiel wird eine TrueType-Schriftart angegeben.

Folgende weitere Möglichkeiten waren vorgesehen, um die Schriftart genau einzugrenzen:

panose-1:, gefolgt von 10 durch Leerzeichen getrennten Zahlen, sollte eine Schriftart nach dem Panose-1-System bestimmen. Beispiel: panose-1: 2 4 5 2 5 4 5 9 3 3;
stemv: und stemh: für die vertikale und horizontale Stammbreite der Glyphen.
units-per-em: für die Anzahl der Einheiten pro em-Maßeinheit. Üblich sind die Werte 250 (bei Intellifont), 1000 (bei Type-1) oder 2048 (bei TrueType). Bei Angabe von stemv: und/oder stemh: war ebenfalls units-per-em: anzugeben.
slope: für den vertikalen Winkel der Glyphen.
cap-height: für die Höhe der Großbuchstaben der Glyphen.
x-height: für die Höhe der Kleinbuchstaben der Glyphen.
ascent: für die maximale Höhe der akzentlosen Glyphen.
descent: für die maximale Tiefe der akzentlosen Glyphen.
definition-src:url() für eine Datei mit Schriftartendefinitionen.
baseline: für die untere Grundlinie der Glyphen.
centerline: für die zentrale Grundlinie der Glyphen.
mathline: für die mathematische Grundlinie der Glyphen.
topline: für die obere Grundlinie der Glyphen.


	Ausrichtung und Absatzkontrolle
	Schriftformatierung

SELFHTML/Navigationshilfen Stylesheets (CSS) CSS-Eigenschaften