(X)HTML / CSS Tutorial: Cufón - Text Replace

12 | Bewertung: Keine Berechtigung!

Hallo DN,

hier ein kleines Tutorials wie man Cufón in eine Seite einbindet.

Cufón ist ein Javascript basierendes Script das es ermöglich, keine Systemschriften auf Webseiten anzuzeigen ohne für jede Headline oder Navigationspunkt eine Grafik zu erstellen.

Links:

Generator: http://cufon.shoqolate.com/generate/
Dokumentation: http://wiki.github.com/sorccu/cufon/

Schritt 1:

Ich geht auf die Seite http://cufon.shoqolate.com/generate/ in den ersten vier Input Feldern, könnt Ihr bestimmen welche Font für welches aussehen benutzt werden soll. Also Regular, Bold, Italic, Bold Italic. Ich verwende für das Tutorial Myriad Pro, da ich diese Schrift sehr mag und weil Sie alle 4 Schriftvarianten abdeckt.

01.a

Im nächsten Feld, könnt Ihr einen eigenen Name für die "font-family" vergeben, muss man aber nicht machen ich benutze es auch nicht deswegen gehe ich dort auch nicht weiter drauf ein.

Dann müsst Ihr noch due EULAs akzeptieren das heißt das Ihr die Lizens für die Schrift habt und auch benutzten dürft. Logisch ist der eine Schrift benutzt die Geld kostet aber diese nicht erworben hat sondern von einem Bekannten oder Freund hat sollte diese besser nicht benutzten, da es zu einer Anzeige kommen kann.

Schritt 2:

In diesem Schritt könnt Ihr Auswählen welche Schriftzeichen verwendet werden sollen zum Beispiel: nur Zahlen, nur Großbuchstaben, nur Sonderzeichen ect.

Für Webdesign Brauche ich natürlich alle Groß,- und Kleinbuchstaben, Zahlen und Sonderzeichen.

Ich mache immer ein Häckchen bei "Basic Latin" und schreibe in das letzte Feld (.. and also these single characters) "üöäÜÖÄß" so hat men genau das was man braucht und man hat keine unötigen Zeichen in der Datei dann bleibt diese auch schön klein.

Schritt 3:

Bei Security, könnt ihr die Domain angeben wo diese Schrift verwendet werden soll, so kann diese nicht einfach von Dritten wo anders benutzt werden. Ich benutze diese Feature auch nicht und gehe nicht weiter drauf ein.

Schritt 4:

Performance & File Size

Hier geht es wie die Headline schon sagt umd die Performance der Schrift und die Dateigröße.

Im ersten Teil (Scale the font to the following size) kann man angeben wie die Schrift skaliert werden soll, sehr hilfreich ist die Tabelle dazu http://cufon.shoqolate.com/doc/optimal-scaling.html.

Hier könnt Ihre sehen das der Wert 720 der optimalste ist da 14 Schriftgrößen optimal getroffen werden. Mann kann auch keinen Werten angeben und ein Häckchen setzt das die Schrift eigene Skalierung benutzt werden soll, was in den meisten Fällen nicht zu empfehlen ist.

Im nächsten Teil kann man noch angeben ob eine Optimierung geben sein soll. Ich lasse es bei den Standart werten. Genau so wie beim nächsten Teil (Include kerning tables (improves readability but slightly increases file size)

Schritt 5:

Customization

Hier kann man angeben für welches Script die Datei erstellt werden soll. Cufon.registerFont oder Raphael.registerFont. Was Raphael.registerFont genau ist weiß ich nicht ich denke aber auch mal ein Text Replacement Script.

Also wählt ihr Cufon.registerFont aus.

Schritt 6:

Terms

Hier müsst Ihr einen Häckchen setzt, das Ihr mit den Nutzerbedigungen und Lizensen einverstanden seit. Dies kann man ohne Probleme machen. Es ist alles kostenlos nur wie oben schon gesagt bitte benutzt nur Schriften wo Ihr auch eine Lizenz für habt.

Schritt 7:

Generieren

Da ihr jetzt alles notwendige aus gefüllt habt klickt auf den blauen Button "Let´s do this" und speichert die Datei am besten direkt in dem Ordner wo die Webseite drin liegt die Ihr mit dem Script benutzten möchtet. Dann klickt Ihr noch ganz oben auf der Seite auf "Download" um das Cufón Script runterzuladen und speicherst es im gleichen Ordner wo Ihr die Font Datei gespeichert habt. Die Font Datei nennt Ihr am besten um in myriad-pro.font.js da der Dateiname sonst zu lang ist.

Schritt 8:

Hier zeig ich euch, wie Ihr die Datein einbindet und den Text ersetzen könnt.

Bei mir liegen die Datein in einem Ordner der heißt "js". Die Cufón und Font Datei müßt Ihr in eurem <head> Bereich der Seite einbinden.

Schritt 9:

Jetzt müsst Ihr euch noch Überlegen welcher Text ersetzt werden soll, bei mir sind es immer die Überschriften also <h1>, <h2>,<h3> etc und manchmal die Navigation. Dies müßt Ihr dann so in dem Headbereich einbinden.

Schritt 10:

Wenn Ihr euch die Seite jetzt anschaut, dann sieht man beim laden erst die Normal Schrift die man mit CSS generiert hat und dann springt diese um auf die Cufón, da dieses nicht sehr schön aussieht könnt ihr einfach folgendes in eure CSS schreiben damit kein Springen der Schrift erkennbar ist.

Schritt 11:

Jetzt seit Ihr fertig und eure Schrift wird mittels Cufón ersetzt.

Hier sind einige Beispiele wo ich dieses Script angewand habe:

http://www.autoservice-krause-berlin.de/
http://merkur-apotheke-leipzig.de/
http://www.emtronic-korschenbroich.de/

Bei Fragen oder Anrreungen stehe ich euch gerne zur Seite!

Grüße Dennis