Webdesign - Webseiten planen, gestalten - Free-Hack Library

CSS
p {
font-family: Gentium, serif;
}
Wie die Schrifteinbindung im Detail und vor allem Browser übergreifend
funktioniert, zeigt der folgende Exkurs:
Exkurs: Schrifteinbettung
In diesem Exkurs lernen Sie Schritt für Schritt, Schriften in Ihre
Website einzubinden.
Schritt 1: Geeignete Schriften bereitstellen
Schriften liegen in den unterschiedlichsten Formaten vor. Für die
Einbettung in eine Website sind die folgenden Schriftformate
relevant:
• TrueType-Schriften (*.ttf)
• OpenType-Schriften (*.ttf, *.otf)
• Embedded Open Type-Schriften (*.eot)
Darüber hinaus ist es möglich, Schriften einzubinden, die in einem
SVG-Dokument festgelegt wurden.
In unserem Fall werden die gewünschten Schriftarten in einem
Verzeichnis fonts bereitgestellt. Wir haben uns für eine Handschrift
und einen Sütterlin-Font entschieden. Beide Schriften sind frei
verfügbar.
Schritt 2: Schriften im StyleSheet einbinden
Die @font-face-Regel erlaubt das Einbinden der bereitgestellten
Schriften. Pro Schriftfamilie ist eine @font-face-Anweisung
nötig.
@font-face {
font-family: "AdAstra";
src: url(fonts/AdAstra.ttf);
}
@font-face {
font-family: "Suetterlin";
src: url(fonts/GL-Suetterlin.otf);
}
Schritt 3: Schriften zuweisen
Die Schriften werden nun den gewünschten HTML-Elementen
zugewiesen:
h1 {
font-family: "AdAstra", serif;
}
TECHNISCHE
GRUNDLAGEN
4
Browserunterstützung für @font-face
Die meisten aktuellen Browser bieten die Möglichkeit,
Schriften mittels @font-face einzubinden.
Webkit-Browser (Safari/Chrome) können
das seit Version 3.1 (Safari) bzw. 4 (Chrome),
Opera seit Version 10, der Internet Explorer seit
Version 4 und die Mozilla Firefox seit Version
3.5. Der Support für Smartphone-Browser ist
noch nicht so weit fortgeschritten.
Um sicher zu gehen, dass die Seite auf einem
alten oder besonders exotischen Browser trotzdem
gut aussieht, sollten Sie als "Fallback"
immer eine der in Kapitel 3.3.2 aufgeführten
"Core Fonts" im Stylesheet mit angeben.
@font-face Kits
Um das Einbinden zu vereinfachen, bieten
manche Free-Fonts-Seiten und Schrift-
Mietservices sogenannte @font-face Kits an.
Diese enthalten die benötigten Schriften für
die unterschiedlichen Browser (inklusive vieler
Smartphones) sowie den Code zum Einbinden
in das Stylesheet.
Linktipps:
FontSquirrel: http://www.fontsquirrel.com/
fontface
Google font directory: http://code.google.com/
webfonts
Typekit: http://typekit.com/
75