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 )


<!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>

[ad#posting]

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

Hat Euch der Artikel weitergeholfen oder gefallen?
Ich freue mich auf einen Blick auf meine Amazon-Wunschliste. Vielen Dank!

Hat Euch der Artikel weitergeholfen oder gefallen? Ich freue mich auf einen Blick auf meine Amazon-Wunschliste. Vielen Dank!Ich bin freiberuflicher TYPO3-Entwickler, Web-Entwickler und Frontend-Entwickler. Ich arbeite im und für das Web etwas mehr als 12 Jahre. Mehr Infos zu der TYPO3 Internetagentur - INGENIUMDESIGN.

Leave a Reply

Captcha * Time limit is exhausted. Please reload CAPTCHA.

12 Kommentare

  1. 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.

  2. Pingback: Vom Print- zum Screendesign wechseln, was ist zu beachten? | TUTORIALBOX.DE

  3. 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

  4. 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! ; )

  5. Pingback: Revolution: Webtypografie möglich durch Webfonts von FontShop - Malte Pyko

  6. Pingback: Cufon mit class benutzen

  7. Horst39

    Hier hat jemand ein Plugin für WordPress geschrieben, das Teil heißt DFR4WP, wirkt ausgereift und funktioniert astrein. http:www.thorstengoerke.de

  8. 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.

  9. hab es glaub ich so gelöst:

    Cufon.replace(‘h1.classname’);

    tester

  10. oxana

    wie kann ich den benutzen wenn ich nur links eine bestimmte klasse umwandeln muss Cufon.replace(‘.text a’); geht nicht

    Danke

Next ArticleTYPO3 - Doppelter Title im Quellcode