Dynamische Schriftersetzung auf Webseiten mit Cufon
Heute habe ich das Javascript Tool Cufón getestet und muss sagen, es ist einfach, klein und perfekt. Habe bisher noch keine Probleme im InternetExplorer 6, 7, FireFox2, 3 oder im Safari sehen können. Demo
Ihr könnt Euch mal eine .html Datei erstellen und einen Test mit der dynamische Schriftersetzung von Cufón vorbereiten.
Das gute an dem ganzen System, der H1 oder H2 Tag wird nicht gelöscht und es wird kein „Bild“ erstellt! Der Text bleibt im Tag! Das Negative an dem JavaScript PlugIn, es werden pro Wort ein span erstellt!
[ad#posting] Hier mal ein Beispielcode: ( mehr braucht Ihr nicht )
[ad#posting]
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="cufon-yui.js" type="text/javascript"></script>
<script src="HelveticaNeueLTPro-Roman_400.font.js" type="text/javascript"></script>
<script type="text/javascript">
Cufon.replace('h1');
</script>
</head>
<body>
<h1>This text will be shown in Frutiger LT Std.</h1>
</body>
</html>
Achtung: Da die Schrift für da Web freigegeben wird, müsst Ihr die Lizensen bei „Kauf-Schriften“ lesen!
Wiki: wiki.github.com
Eure Meinung zu dem Artikel ist gefragt! Schreibt mir ein Kommentar
Ich freue mich auf einen Blick auf meine Amazon-Wunschliste. Vielen Dank!
ultrasound technician income
thats great thankyou
Fachinformatiker
Wie immer hat alles vor und nachteile. Natürlich wird der Quellcode unschön, aber dafür wird das aussehen besser.
Nun kann jeder selbst ausrechnen was ihm lieber ist für einige Seiten ist das Aussehen wichtiger als ein perfekter Quellcode füt Google. Davon abgesehen ist natürlich auch ein guter Quellcode noch lange nicht alles was zu findbarkeit beiträgt.
Pingback: Vom Print- zum Screendesign wechseln, was ist zu beachten? | TUTORIALBOX.DE
Michael Freitag
Nutze ich jetzt auch schon länger und bin überzeugt 🙂
Björn Biege
Der Vorteil ist einfach das keine Bilder im Quelltext stehen, und die Überschriften somit suchmaschinentechnisch nicht verloren gehen . Wenn du die Sache mit Bildern löst dann musst du immer dafür sorgen das das h-Tag auch noch irgendwo versteckt mit dabei ist, damit die suchbots damit was anfangen können. Wenn man cufon nutzt werden für die Suchbots ganz einfach die H-Tags angezeigt da diese ja kein js verarbeiten. Das das in unübersichtliche spans umgewandelt wird ist eigendlich total egal da das ja nur im Browser passiert und die Suchmaschine davon nichts mit bekommt…. und dem user sollte das auch recht egal sein.
Greez Björn
Tammi
Also die Aussage ‚es wird kein “Bild” erstellt‘ kann man so auch nicht ganz unterstützen, denn das was im Browser angezeigt wird, ist ein Bild, man kann also den eigentlichen Text auch nicht selektieren, das mag manchmal sogar von Vorteil sein, ich finde es so lala!
Klar im Code steht der Text noch drin, wenn man ihn den findet, zwischen den ganzen spans! ; )
Pingback: Revolution: Webtypografie möglich durch Webfonts von FontShop - Malte Pyko
Pingback: Cufon mit class benutzen
Horst39
Hier hat jemand ein Plugin für WordPress geschrieben, das Teil heißt DFR4WP, wirkt ausgereift und funktioniert astrein. http:www.thorstengoerke.de
Siffredi
„Das Negative an dem JavaScript PlugIn, es werden pro Wort ein span erstellt!“
Sorry, aber das geht ja mal gar nicht. Das bläht den ganzen Code unendlich auf. Vielelicht fällt den Machern noch was cleveres ein um den Code zu reduzieren.
basti
hab es glaub ich so gelöst:
Cufon.replace(‚h1.classname‘);
tester
oxana
wie kann ich den benutzen wenn ich nur links eine bestimmte klasse umwandeln muss Cufon.replace(‚.text a‘); geht nicht
Danke