Marktplatz Downloads Tutorials Forum

Designnation bietet auch:

Tutorial hinzufügen

Beliebte Links Weitere Optionen

Tutorial suchen

Titel

Schlüsselwörter

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



Ranking: +2   Kommentare: 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
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.

02
02





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)

04
04





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.

05
05





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.

06
06


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.

08
08





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.

09
09





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.

10
10





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

Veröffentlicht von: deleted_1373545880
Veröffentlicht am: 26 Mar. 2010
Bookmarks: social bookmarking yigg it Linkarena Technorati Yahoo Mr. Wrong
Schlüsserwörter: CSS Cufon font Homepage HTML Internet Java Replace Scritp Text Webdesign


Themenverwandte Tutorials


Kommentar(e) (12)


brunoloeffel sagt:

Hallo,
Ich habe ein Template Viagranitti1.7 mit cufor Schrift Script. Leider sind in dem Script keine deutschen Umlaute integriert, die brauche ich dringend!
Wenn ich das Script nach der Anleitung generiere, bekomme ich nur eine Datei mit 475 Byte heraus, die Originale im Template hat ca. 20kB.
Auch wird die Schriftart auf der Website nicht angezeigt, was könnte falsch sein?

12 Jan. 2012 21:09:12 • Antworten


mhgruen sagt:

Ist eine Super Anleitung.
Funktioniert tadellos.
Vielen Dank!

26 Aug. 2011 12:44:13 • Antworten


_chris sagt:

Auch wenn Chef oder Kunde auf altes bestehen, kennen sollte man die neuen Sachen trotzdem. Für diejenigen, die es interessiert, hier ein deutsch Links mit einem kurzen Überblick: http://www.mediaevent.de/css/font-face.html

2 May. 2010 00:17:12 • Antworten


deleted_1373545880 sagt:

Zitat _chris:

"Neuerdings" ist es nichtmehr notwendig, die Schrift auf dem PC zu haben, es reicht eine Verlinkung zum Server. Weil dadurch die Schrift verteilt wird und evtl Rechtsverletzungen eintreten, gibt es auch Angebote, bei denen man die Schrift mietet (Schrift liegt beim Hoster und man verweisst im CSS drauf).

Auf dem Weg kannst du dann jeder headline ganz dolle Schnörkel verpassen und trotzdem steht im HTML-Code noch der normale Text - was bestimmte Personengruppen zum Vorteil kommt und das kopieren auch einfacher macht.

Allerdings ist das ganze auch nichtmehr so neu, hat glaube ich mit dem IE5(?) angefangen.



Hab ich noch nie was von gehört und ich arbeite in einer Webdesign Agentur wo fast jeder Cufon benutzt. Aber werde mich mal erkundigen vielen dank.

27 Apr. 2010 23:39:44 • Antworten


_chris sagt:

"Neuerdings" ist es nichtmehr notwendig, die Schrift auf dem PC zu haben, es reicht eine Verlinkung zum Server. Weil dadurch die Schrift verteilt wird und evtl Rechtsverletzungen eintreten, gibt es auch Angebote, bei denen man die Schrift mietet (Schrift liegt beim Hoster und man verweisst im CSS drauf).

Auf dem Weg kannst du dann jeder headline ganz dolle Schnörkel verpassen und trotzdem steht im HTML-Code noch der normale Text - was bestimmte Personengruppen zum Vorteil kommt und das kopieren auch einfacher macht.

Allerdings ist das ganze auch nichtmehr so neu, hat glaube ich mit dem IE5(?) angefangen.

Zuletzt bearbeitet am: 27 Apr. 2010 21:57:10

27 Apr. 2010 21:55:54 • Antworten


deleted_1373545880 sagt:

Zitat _chris:

Hmm, eigentlich eine veraltete Technik. Das kann CSS bereits und wenn man die Lizenzen beachtet, gibt es auch bessere CSS Lösungen (Art Mietvertrag der Schrift).



Nicht das ich wüsste. Kla wenn man die Schriftart auf dem PC hat dann ist das kein Problem mit CSS aber die "normalen User" haben meist nur die standart Systemschriften drauf und wenn man dann externe Schriften einbaut werden diese beim User durch eine Systemschrift ersetzt.

26 Apr. 2010 11:22:59 • Antworten


_chris sagt:

Hmm, eigentlich eine veraltete Technik. Das kann CSS bereits und wenn man die Lizenzen beachtet, gibt es auch bessere CSS Lösungen (Art Mietvertrag der Schrift).

25 Apr. 2010 22:29:24 • Antworten


deleted_1373545880 sagt:

Zitat Tom:

Wie siehts mit den Lizenzen für Windowsschriftarten wie Calibri und MyriadPro etc. aus? Darf man die da so ohne weiteres verwenden? Hab dazu zwar einiges im Internet gefunden, aber so konkrete Aussagen dazu hab ich nicht gefunden.



Das kann ich dir leider auch nicht direkt beantworten. Aber ich benutzte die MyriadPro auch oft in der Firma und ich denke wenn man Windows Original hat dann kauft man automatisch die Lizenz auch dazu. Aber wie gesagt so richtig kann ich es dir nicht beantworten. Vieleicht schreibst du mal eine E-Mail an den Microsoft Support.

6 Apr. 2010 12:47:27 • Antworten


Tom sagt:

Wie siehts mit den Lizenzen für Windowsschriftarten wie Calibri und MyriadPro etc. aus? Darf man die da so ohne weiteres verwenden? Hab dazu zwar einiges im Internet gefunden, aber so konkrete Aussagen dazu hab ich nicht gefunden.

6 Apr. 2010 10:40:20 • Antworten


deleted_1373545880 sagt:

Zitat Tom:

Feine Sache.

Hoffe ich habs nicht überlesen, aber wie kompatibel ist das mit unser aller Freund IE kleinergleich 6?



Funktioniert ohne Probleme, zumindest hab ich noch keine festellen können.

2 Apr. 2010 15:35:33 • Antworten



Anfang

<<

1

2>>Ende

Kommentar eintragen


!! Jetzt kostenlos anmelden oder einloggen und mitdiskutieren!


Partner: • Designer in ActionFlash HilfeTutorials.dePixelio.deFlashstar BlogLizenzfreie Bilder