Webdesign - Webseiten planen, gestalten - Free-Hack Library

Abb. 4.4.3a: Die per @font-face eingebetteten
Schriften im Browser
76
Linktipps: Tools zur eot-Konvertierung
WEFT: http://www.microsoft.com/typography/
WEFT.mspx
ttf2eot online: http://www.kirsle.net/wizards/
ttf2eot.cgi
@font-face Generator: http://www.fontsquirrel.
com/fontface/generator
p.suetterlin {
font-family: "Suetterlin", serif;
font-size: 2em;
}
CSS
Das Ergebnis ist vielversprechend. Zumindest in allen Browsern
außer dem Internet Explorer. Um den IE kümmern wir uns im
nächsten Schritt.
Schritt 4: Schriften für den Internet Explorer umwandeln
Microsoft selbst stellt mit WEFT ein Tool zur Schriftkonvertierung
zur Verfügung, dieses läuft jedoch nur unter Windows und ist
wenig bedienerfreundlich. Alternativen findet man jedoch im
Netz. Entscheidend ist, dass Sie von jeder gewünschten Schrift,
eine eot-Variante erstellen und am gewünschten Ort (hier: font-
Verzeichnis) bereitstellen. Die Einbettung für den IE erfolgt genau
wie für die anderen Browser, nur dass die eot-Datei als Schriftquelle
angegeben wird. Der @font-face-Aufruf erfolgt vor dem für die
anderen Browser:
/* für den IE */
@font-face {
font-family: "AdAstra";
src: url(fonts/AdAstra.eot);
}
@font-face {
font-family: "Suetterlin";
src: url(fonts/GL-Suetterlin.eot);
}
Schritt 5: Finetuning
Prinzipiell ist es keine schlechte Idee, das Format der gewählten
Schriftart mit anzugeben. Insbesondere deshalb, weil *.ttf-Dateien
das TrueType- und das OpenType-Format enthalten können. Hierzu
dient die format-Eingenschaft:
@font-face {
font-family: "AdAstra";
src: url(fonts/AdAstra.ttf) format("truetype");
}
Mögliche Werte für diese Eigenschaft sind truetype, open type,
truetype-aat (ein von Apple erweitertes TrueType-Format), embedded-opentype
und svg.
Möglicherweise hat der ein oder andere Benutzer die von Ihnen
eingebettete Schriftart auf seinem Rechner installiert. In diesem
Fall wäre es schneller, die lokale Version der Schrift zu verwenden,