typeface.js - Browserübergreifend eigene Schriftarten nutzen
Anzeige Hier werben
Mit CSS3 und @font-face wird man in Zukunft endlich auch Nicht-Standard-Schriftarten nutzen können und Webseiten so einen persönlicheren Touch geben. Um dies auch jetzt schon, zumindest teilweise, zu tun werden meist Bilder oder Flash-Filme verwendet, die den eigentlichen Text ersetzen. Gerade bei der Darstellung durch Bilder ist aber ein erheblicher Mehraufwand notwendig, da diese mühsam von Hand erstellt werden müssen; für die Flash-Lösung gibt es weitaus bessere Automatismen. Jedoch ist der so eingefügte Text jeweils nicht durch Suchmaschinen auffindbar.
Mit typeface.js ist es nun möglich die Texte direkt auf der Webseite durch ein <canvas>-Element darstellen zu lassen, der eigentliche Text bleibt semantisch korrekt im HTML eingebunden. Der große Vorteil dieser Methode ist eine etwas höhere Reichweite als bei Flash (Javascript ist häufiger aktiv) und gleichzeitig ein geringerer Aufwand bei der Erstellung.
Wie bei @font-face können aber nur Schriftarten verwendet werden, die die Einbindung auf Webseiten erlauben, derzeit trifft das hauptsächlich freie Schriftarten. Außerdem muss die Schriftart in ein Javascript-Format überführt werden, hierzu gibt es auf der typeface-js-Homepage ein entsprechendes Formular.
Für ältere Browser wie beispielsweise den Internet Explorer 6 bietet typeface.js übrigens auch eine Lösung - hier beispielsweise über VML.
David Danier arbeitet seit mehr als neun Jahren im Bereich Web Programmierung und ist unter anderem Geschäftsführer der Webagentur Team23 sowie Webmasterpro.de.
Profilseite betrachten
Funktioniert gut aber...
Die Library haben wir einige Zeit auch verwendet jedoch irgendwann fallen gelassen. Wenn es um Multilanguage support geht, ist diese Lösung eher schlecht als recht. Allein um den chinesischen Zeichensatz ab zu decken ist die generierte JS Datei 27MB groß und dauert 10minuten bis se geladen und gerendert ist, das kann man keinem User antun.
http://cufon.shoqolate.com/
Ist nochmal sowas. ;-)
http://cufon.shoqolate.com/generate/