HTML5 als Designwerkzeug - Apps mit HTML5 und CSS3: Fur iPad, iPhone und Android - page 152

Dafür dient Ihnen folgender HTML-Code als Grundlage:
<h1>Diese Überschrift ist in der kostenlosen Schriftart "Yanone Kaffeesatz"
gesetzt.</h1>
<p>In diesem Beispiel testen Sie Webfonts via @font-face.</p>
Die Schriftart Yanone Kaffeesatz ist zum kostenlosen Download verfügbar unter
http://www.yanone.de/typedesign/kaffeesatz/ . Laden Sie diese herunter, und spei-
chern Sie die Dateien in einem Unterordner schriften .
In der zur HTML-Datei zugehörigen CSS-Datei definieren Sie nun die Schrift wie folgt:
@font-face {
font-family: YanoneKaffeesatz;
src: url('../schriften/YanoneKaffeesatz-Regular.otf');
}
h1 {
font-family: "YanoneKaffeesatz";
}
p {
font-family: Georgia;
}
Listing 4.11 Die Definition der Absatzformate und der verwendeten Schriften via CSS
Über die Eigenschaft @font-face geben Sie den Titel und den Pfad zur Schrift an.
Beachten Sie, dass Sie den Pfad immer relativ zur CSS-Datei angeben müssen. Liegt
die Datei styles.css in einem Ordner styles , so muss die Pfadangabe den Sprung zum
übergeordneten Order beinhalten. Diesen erreichen Sie mit einem vorangestellten
../ .
Sollten Sie wieder Probleme mit Sonderzeichen, wie z. B. Umlauten, haben, setzen Sie
den Zeichensatz in der HTML-Datei auf UTF-8. Das haben Sie zwar schon einmal
gemacht, aber hier nochmal zur Erinnerung der Code für den head -Bereich:
<meta charset="utf-8">
Sie haben nun erfolgreich Ihre erste Schriftart mit @font-face eingebunden und einer
Überschrift zugeordnet (Abbildung 4.16). Beachten Sie, dass die Schriftart im Format
.otf , dem Open Type Format vorliegen muss. Dieses Format wird von mobilen Brow-
sern sowie Safari, Firefox und Google Chrome unterstützt. Wenn Sie eine Komptabi-
lität über diverse Browser hinaus benötigen, empfiehlt sich der @font-face Generator