SELFHTML/Quickbar  CSS Style-Sheets  Style-Sheet-Angaben

Style-Sheet-Angaben: Schriftformatierung mit Schriftartendatei
Diese Seite ist ein Dokument mit Informationstext

 Schriftformatierung mit Schriftartendatei (@font-face, src, font-family)
 Schriftformate eingrenzen
 Unicode-Bereich eingrenzen (unicode-range)
 Weitere Angaben zur Schriftquelle

 

CSS2.0MS IE4.0Netscape 4.0 Schriftformatierung mit Schriftartendatei (@font-face, src, font-family)

Mit dieser Angabe können Sie eine Schriftart erzwingen, ähnlich wie mit  Schriftart (font-family:). Der Unterschied ist jedoch, daß Sie mit der hier beschriebenen Angabe direkt die Daten-Ressourcen bestimmter Schriftarten ansprechen, also bestimmte Schriftartendateien, oder zumindest mit Hilfe spezieller Befehle die Charakteristika der gewünschten Schriftart exakt beschreiben.

Beispiel:

<html>
<head>
<title>Titel</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. Dahinter folgen, in geschweiften Klammern, die Daten. Die beiden wichtigsten sind der Schriftartenname font-family und die URL-Adresse 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 Style-Sheet-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, daß gleich zwei URL-Angaben notiert sind. Einmal wird eine Endung eot-Datei als Schriftartenquelle angegeben, einmal eine pfr-Datei. Beide Formate sind browser-spezifisch: eot-Dateien sind Schriftartendateien, die der MS Internet Explorer (ab Version 4.0) als Web-Schriftarten erkennt; pfr-Dateien sind Schriftartendateien, die Netscape (ab Version 4.0) erkennt. Wenn Sie Ihre gewünschte Schriftart in beiden Formaten anbieten können, 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.

 

CSS2.0 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 desem Fall nur dann zum Anwender, wenn Formatierungen in der HTML-Datei die Übertragung sinnvoll machen.

Beispiel:

<html>
<head>
<title>Titel</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 Style-Sheet-Befehlen 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;.

 

CSS2.0 Unicode-Bereich eingrenzen (unicode-range)

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>Titel</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-Zeichensatz. Wenn nun in einem Bereich, der diese Schriftart benutzt, beispielsweise Umlaute oder andere Zeichen vorkommen, die nicht im ASCII-Zeichensatz vorkommen, wird die Schriftartendatei nicht downgeloadet.

Unicode-Angaben beginnen immer mit U+. Dahinter folgt eine Angabe des gewünschten Zeichenwerts 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, daß 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 sogenannten Western-Latin-1-Zeichensatzes beginnen, der aus 256 Zeichen besteht, deckt die Angabe in dem Beispiel genau diesen Zeichensatz ab. Wenn Sie einen beliebigen, Unicode-Bereich bestimmen möchten, können Sie dies mit einer Angabe tun wie z.B. U+AC00-D7FF

.
 

CSS2.0 Weitere Angaben zur Schriftquelle

Die Version 2.0 der CSS-Sprache stellt einige Style-Sheet-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.xy.de/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, daß 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 downloadet, wenn die Schriaftart 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, daß 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. Dieses Schriftartenformat ist nur in der Windows-Welt verbreitet. Anwender, die z.B. einen Macintosh oder einen Amiga-Rechner einsetzen, haben von einer solchen Datei nichts. 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 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.

weiter: Style-Sheet-Angaben: Abstände, Ränder, Ausrichtung
zurück: Style-Sheet-Angaben: Schriftformatierung
 

SELFHTML/Quickbar  CSS Style-Sheets  Style-Sheet-Angaben

© 1998  Stefan Münz, muenz@csi.com

1