@font-face - Die sicherste Methode Webfonts zu nutzen
Fontspring schreibt im Artikel „The New Bulletproof @Font-Face Syntax“ über die browserübergreifende Methode Webfonts zu nutzen, also eigene Schrifttypen. Der Trick besteht dabei aus einem einzigen Zeichen: Der Raute #.
Die „Fontspring-CSSNinja @Font-Face Syntax“
Der folgenden Code wurde von Fontspring entwickelt und von CSSNinja verbessert. Voraus ging damals der Artikel Bulletproof @font-face syntax von Paul Irish 2009.
@font-face {
font-family: 'MyFontFamily';
src: url('myfont-webfont.eot#') format('eot'),
url('myfont-webfont.woff') format('woff'),
url('myfont-webfont.ttf') format('truetype'),
url('myfont-webfont.svg#svgFontName') format('svg');
}
Warum es funktioniert
Die Internet Explorer Versionen unter 9 haben alle einen Bug im Parser für das src-Attribut. Wenn du darüber mehr als eine Schriftart einbindest, schafft es der IE nicht sie zu laden und meldet einen 404-Fehler. Der Grund dafür ist, dass der IE versucht, alles zwischen den Klammern als eine Datei zu laden. Das zwingt dich das EOT-Format als erstes zu nennen, angehängt mit einer einzelnen Raute #. Der IE denkt dann, dass der Rest der Zeichenfolge ein URL-Fragment ist und lädt nur die EOT-Datei. Alle andere Browser folgen weiter den Spezifikationen und wählen das Format, was sie brauchen.
Browser-konform
Getestet wurde der Code unter
- Safari 5.03
- IE 6-9
- Firefox 3,6-4
- Chrome 8
- iOS 3,2-4,2
- Android 2,2-2,3
- Opera 11
Über den Autor
Alexander Schmidt ist Webentwickler, Buchautor und Dozent. Er lebt mit seiner Familie in Bad Nauheim / Hessen. Seit 2005 realisiert er als Einzelunternehmer Websites mit Joomla und hat sich sich auf hochwertige Template-Umsetzungen spezialisiert. Er ist Fachautor der Zeitschrift t3n.
Diese E-Mail-Adresse ist gegen Spambots geschützt! JavaScript muss aktiviert werden, damit sie angezeigt werden kann. | EDVAS Webdesign |
Kommentare (11)
Alexey
Alexander Schmidt
Markus Tamler
Alexander Schmidt
Markus Tamler
Alexander Schmidt
Markus Tamler
Markus Tamler
mcliquid
David Bolk
Ich habe einen ähnlichen Code zusammengestellt und konnet diesen dank deinem Code verbessern. Was ich mich allerdings noch frage, wie ich im Opera 9 die Webschriften zum laufen bringe in allen anderen Versionen und Browsern läuft es. Hast du da vielleicht ne Idee?
Aquaice