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

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

## 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.

## 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;`.

## 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`

.

## 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