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

400,400italic

Nutzen Sie die CSS-Eigenschaft font-style , um Ihrem Element einen bestimmten Stil
zuzuweisen. Über font-weight geben Sie die Stärke an. Der komplette CSS-Code für eine
Überschrift in der Stärke 400 und in dem Stil italic sieht damit folgendermaßen aus:

4

h1 {
font-family: 'Poly', serif;
font-weight: 400;
font-style: italic;
}

Die Ausgabe auf dem iPad sehen Sie in Abbildung 4.21.

Abbildung 4.21 Die Schriftart »Poly« auf dem iPad

4.2.4 Vor- und Nachteile von Webfonts

Webfonts sind eine grandiose Erfindung. Sie erweitern Ihre gestalterischen Möglich-
keiten und bereichern Ihre WebApp erheblich. Sie erhöhen die Lesbarkeit, erzeugen
Charakter und grenzen Ihre WebApp von anderen ab. Setzen Sie Webfonts gezielt
und überlegt ein, Ihre WebApp wird stark davon profitieren.

Die Definition via @font-face hat den Vorteil, dass die Schriftdateien in Ihrer Ordner-
struktur bereitliegen und somit in Ihrer WebApp auch ohne Internetzugang verfüg-
bar sein können. Der Nachteil ist, dass Sie sich selbst um die Kompatibilität zu
diversen Endgeräten kümmern müssen.

Die Einbindung über einen Font-Service hat ebenfalls Vorteile. Zum einen ist die Im-
plementierung einfach, und Sie müssen keine Dateien konvertieren. Die Kompatibi-
litätsprüfung wird komplett vom Font-Service übernommen und stellt somit sicher,
dass Ihre Schrift bestmöglich auf einer großen Anzahl von Endgeräten angezeigt wird.
Des Weiteren ist die Schriftauswahl in einem Font-Service sehr umfangreich. Allein
bei Adobe Typekit können Sie, je nach Grundgebühr, zwischen Hunderten von Schrif-
ten wählen. Viele davon sind etablierte Klassiker, die qualitativ sehr hochwertig
gestaltet sind und über viele Sonderzeichen verfügen.