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)

Diese Eigenschaft wird außer vom Internet Explorer nur noch vom Netscape 4.x unterstützt. Da sie weder in den Mozilla-Nachfolgern noch in anderen aktuellen Browsern implementiert ist, gehört 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 Explorers besucht werden (die die Schriftart-Installation bei hoher Sicherheitsstufe auch bestätigen).

Über @font-face können Sie eine Schriftart definieren und dabei direkt die Daten-Ressourcen der gewünschten Schriftarten ansprechen, also bestimmte Schriftartendateien, oder zumindest mit Hilfe spezieller Definitionen die Charakteristika der gewünschten Schriftart exakt beschreiben. 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:

<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.0) als Web-Schriftarten erkennt; pfr-Dateien sind Schriftartendateien, die Netscape 4.x erkennt. 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

Wenn Sie eine Schriftart mit einer Schriftartendatei definieren, können Sie bei der Definition auch Angaben zu den möglichen Formateigenschaften der Schrift machen, wie z.B. zu Schriftstil (font-style), Schriftvariante (font-variant), Schriftgröße (font-size) oder Schriftgewicht (font-weight). So können Sie dem WWW-Browser bereits in der HTML-Datei mitteilen, welche Formateigenschaften die Schriftartendatei unterstützt. Der Browser überträgt die Schriftartendatei in diesem Fall nur dann zum Anwender, wenn Formatierungen in der HTML-Datei die Übertragung sinnvoll machen.

Beispiel:

<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 können Sie bei der Definition einer Schriftart mit Schriftartendatei einschränkende Angaben zur Schrift machen.

Folgende Besonderheiten sollten Sie dabei beachten:
Bei font-style können Sie auch mehrere erlaubte Angaben machen. Trennen Sie diese Angaben durch Kommata, also beispielsweise: font-style:normal,italic;.
Bei font-variant können Sie auch mehrere erlaubte Angaben machen. Trennen Sie diese Angaben durch Kommata, also beispielsweise: font-style:normal,small-caps;.
Bei font-weight sind die Angaben bolder und lighter nicht zulässig. Außerdem können Sie auch mehrere erlaubte Angaben machen. Trennen Sie diese Angaben durch Kommata, also beispielsweise: font-weight:normal,bold,900;.
Bei font-size sind nur absolute Größenangaben erlaubt, wie etwa font-size:18pt. Relative Größenangaben wie Prozentangaben oder em-Angaben sind nicht erlaubt. Außerdem können Sie auch mehrere Angaben machen. Trennen Sie diese Angaben durch Kommata, also beispielsweise: font-size:12pt,14pt,16pt;.

unicode-range (Unicode-Bereich eingrenzen)

Wenn Sie eine Schriftart mit einer Schriftartendatei definieren, können Sie bei der Definition den Zeichenbereich einschränken. So können Sie dem WWW-Browser bereits in der HTML-Datei mitteilen, welchen Zeichenbereich die Schriftart unterstützt. Der Browser überträgt die Schriftartendatei in desem Fall nur dann zum Anwender, wenn alle Zeichen eines Textes, der mit der Schriftart formatiert wird, innerhalb des definierten Unicode-Bereichs liegen. Dabei gilt das Unicode-System als Grundlage.

Beispiel:

<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>
<tt style="font-family:System">Text mit ß und Ü</tt>
<!-- Datei wird nicht übertragen -->
</body>
</html>

Erläuterung:

Mit unicode-range: können Sie den Zeichenbereich der Schriftartendatei vor dem Download bekannt machen. 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, wird die Schriftartendatei nicht heruntergeladen.

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 stellt einige Stylesheet-Angaben bereit, um Schriftartenquellen möglichst vielfältig definierbar und auffindbar zu machen.

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:

Sie können bewirken, dass der WWW-Browser zuerst auf dem Rechner des Anwenders nach der gewünschten Schriftart sucht und eine auf dem Server bereit liegende Schriftart nur dann herunterlädt, wenn die Schriftart lokal nicht verfügbar ist. Dazu notieren Sie bei der Quellenangabe der Schriftartendatei (src:) zuerst local und dahinter in Klammern den gewünschten Schriftartennamen. Für den Fall, dass der Browser diese Schriftart beim Anwender nicht findet, können Sie, durch ein Komma getrennt, dahinter die Schriftartendatei angeben, die Sie auf Ihren WWW-Seiten mit anbieten - im Beispiel url(kino.ttf).

Sie können ferner Angaben zum Format der Schriftart machen. Der WWW-Browser lädt die Schriftartendatei in diesem Fall nur, wenn sie auf dem Rechner des Anwenders ausführbar ist. Dazu notieren Sie, durch ein Leerzeichen getrennt von den Angaben zu src:local() und/oder src:url(), die Angabe format(). Innerhalb der Klammern können Sie das Format der Schriftartendatei angeben. Im obigen Beispiel wird eine TrueType-Schriftart angegeben. Ein WWW-Browser, der diese Angaben kennt, braucht also eine solche Datei nicht downzuloaden.

Es gibt weitere Möglichkeiten, die Schriftart genau einzugrenzen:

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


	Ausrichtung und Absatzkontrolle
	Schriftformatierung

SELFHTML/Navigationshilfen Stylesheets (CSS) CSS-Eigenschaften

ex.htm">CSS-Eigenschaften