Webdesign - Webseiten planen, gestalten - Free-Hack Library

CSS
statt die von Ihnen bereitgestellte Schrift zu installieren. Die local-
Eigenschaft ermöglicht das:
@font-face {
font-family: "AdAstra";
src: local(AdAstra), url(fonts/AdAstra.ttf
format("truetype");
}
Den korrekten Namen entnehmen Sie der Schrift, z. B. indem Sie
sie doppelklicken.
Bonusschritt: Schriften aus dem Google font directory einbinden
Mit dem font directory stellt Google eine Hand voll webtauglicher
Schriften zur Verfügung, die Sie in Ihre Websites einbinden
können. Sie sind schnell eingebunden, statt selbst eine @fontface-Deklaration
vorzunehmen, importieren Sie einfach das entsprechende
von Google bereitgestellte Stylesheet und verwenden
die Schrift dann so, als hätten Sie die @font-face-Deklaration
selbst vorgenommen:
Ihren HTML-Quelltext erweitern Sie um den folgenden Aufruf:
Der Aufruf in Ihrem Stylesheet könnte z. B. so aussehen:
p.google {
font-family: "Reenie Beanie", serif;
font-size: 2em;
}
Im Browser sieht das Ganze dann so aus:
TECHNISCHE
GRUNDLAGEN
Abb. 4.4.3b: Ihren korrekten Namen verrät
Ihnen die Schrift selber.
Abb. 4.4.3c: Das Google font directory
Link: http://code.google.com/webfonts
4
Abb. 4.4.3d: @font-face funktioniert in allen
gängigen Browsern.
77