print
Schriften mit CSS einbinden
Mit CSS3 können Schriften die nicht auf dem System installiert sind eingebunden werden.
Alle modernen Browser unterstützen das True Type Format (.ttf), welches die Integration in die eigene Website ermöglicht.
Die Schriftart muss die Lizenzbedingung für eine Benutzung als Webfont gestatten.
Beispiel für @font-face
@font-face ist die CSS Regel welche erlaubt eine bestimmte Schrift von einen Server herunterzuladen, um diese Schrift für eine Website zu renden, wenn der Benutzer diese nicht installiert hat.
@font-face {
font-family: "LINTSEC";
src: url("/files/fonts/lintsec.ttf");
}
h2 {
font-family: LINTSEC, Helvetica, Arial, sans-serif;
}
Browser Unterstützung
Safari (ab Version 3.1)
Opera (ab Version 10)
Firefox (ab Version 3.5)
Google Chrome (ab Version 4)
Internet Explorer
Internet Explorer (ab IE4) stellt Schriften nur im .eot Format dar.
Neue Internet Explorer 7 oder IE8 unterstützen .ttf Fonts noch immer nicht.
Eine spezielle Konvertierung des Fonts in ein .eot Format wird nötig.
Am einfachsten mit TTF to EOT Font Converter.
@font-face {
font-family: "LINTSEC";
src: url("/files/fonts/lintsec.ttf");
}
@font-face {
font-family: "LINTSEC-IE";
src: url("/files/fonts/lintsec.eot");
}
h1{
font-family: LINTSEC-IE, LINTSEC, Helvetica, Arial, sans-serif;
text-shadow: 0px 0px 15px #DB7093, -1px -1px 0 #000;
}
Der Fontname kann frei gewählt werden.
Cross Browser
Beide Fonts in einer @font-face Angabe laden.
Hier muss die Syntax sehr genau sein, keine Hochkommas in bei font-family und url.
@font-face {
font-family:ayuma2yk;
src: url(/files/fonts/ayuma2yk.eot); /* EOT for IE */
src: local("real FontName"),
url(/files/fonts/ayuma2yk.ttf) format("truetype"); /* non-IE */
}
h2{
font-family: ayuma2yk, Arial, sans-serif;
font-size:50px;
}
Webdesigner müssen sich nicht länger auf "web safe" fonts welche bereits vor-installiert sind, beschränken.
Achtung: Schriften sollten sparsam eingesetzt werden.
