Ein wunderbares, kleines Javascript-Tool, um automatisch z. B. alle h1-Überschriften einer HTML-Seite in grafische, auf einem eigenen Font basierende, Grafiken umzuwandeln. Wenn man es nicht zu übertrieben einsetzt, ganz ideal.
Der Vorteil ist außerdem, dass der Text in den h1-Tags bleibt und somit für Suchmaschinen lesbar bleibt.
Anleitung
1. Download des Cufon-Tools
2. Upload einer TTF-Datei auf die Cufon-Homepage, generieren des Fonts und Download desselben
3. Quellcode einfügen:
<!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="Vegur_300.font.js" type="text/javascript"></script>
<script type="text/javascript">
Cufon.replace('h1');
</script>
</head>
<body>
<h1>This text will be shown in Vegur.</h1>
</body>
</html>
4. Für den Internet Explorer optimieren – dazu direkt vor dem abschließendem Body-Tag folgende Zeile einfügen:
<script type="text/javascript"> Cufon.now(); </script>
Quellen
Homepage mit der genauen Beschreibung, Download und Font-Erstellungs-Tool: http://cufon.shoqolate.com/generate/
Demo-Homepage: http://www.ehrlich-werben.com/