Σχετικά

To Cufón είναι κάτι αντίστοιχο του sIFR, αλλά σίγουρα πιό εύκολο στην χρήση και γρήγορο στην ενσωμάτωση. Κάποια βασικά στοιχεία :

1. Δεν χρειάζονται plug-ins
2. Συμβατότητα – λειτουργεί με όλους τους γνωστούς browsers
3. Εύκολο στην χρήση
4. Γρήγορο ακόμα και για μεγάλο αριθμό κειμένου

Πώς Λειτουργέι

Το Cufón χωρίζεται σε δύο μέρη. Τον font generator, που μετατρέπει τα fonts σε κατάλληλη μορφή, και την βιβλιοθήκη μετατροπής που είναι γραμμένη σε JavaScript.

Η μέθοδος που θα ακολουθήσουμε είναι πραγματικά εύκολη, αφού ουσιαστικά χρειάζεται μόνο δύο βήματα.

Βημα 1

Πρώτα από όλα πρέπει να κατεβάσουμε την βιβλιοθήκη μετατροπής. Αυτό το κάνουμε αν επισκεφτούμε το http://cufon.shoqolate.com/js/cufon-yui.js και κάνουμε File>Save As. Έχουμε λοιπόν πλέον το αρχείο cufon-yui.js στον υπολογιστή μας.

Μετά ακολουθώντας τον σύνδεσμο http://cufon.shoqolate.com/generate/ βρισκόμαστε στον font generator όπου επιλέγουμε το font που θέλουμε να μας αντικαταστήσει το κείμενο της ιστοσελίδας μας. Μην τρομάξετε από τις πολλές επιλογές.

Εδώ, επιλέγουμε το font που θέλουμε, κάνοντας browse από τον υπολογιστή μας. Έχουμε την δυνατότητα να επιλέξουμε γραμματοσειρές σε Normal, Bold, Italic, Bold Italic. Επιλέγουμε επίσης το “The EULAs of these fonts allow Web Embedding”. Από τα glyphs επιλέγουμε All και απο το Performance & Filesize επιλέγουμε “No thanks, use the font’s own value”. Αποδεχόμαστε την άδεια χρήσης και πατάμε το “Let’s Do This”

Κατεβάζουμε το αρχείο μας και το αποθηκεύουμε. Έχουμε πλέον και το αρχείο του font μας.

Βημα 2

Το μόνο που έχουμε να κάνουμε τώρα είναι να ενσωματώσουμε τα αρχεία μας στην ιστοσελίδα μας. Αυτό το κάνουμε προσθέτοντας τον εξής κώδικα στο head μέρος της ιστοσελίδας μας.

<script src="cufon-yui.js" type="text/javascript"></script>
<script src="Calibri_700.font.js" type="text/javascript"></script>

Στο συγκεκριμένο βοήθημα χρησιμοποιήσαμε το font Calibri. Έτσι το αρχείο μας ονομάζεται Calibri_700.font.js.

Τέλος για να δούμε κάποια αλλαγή χρειάζεται να προσθέσουμε στο head κομμάτι της σελίδας μας

<script type="text/javascript">
Cufon.replace('h1');
</script>

Έτσι πλέον όλα τα H1 tags στην ιστοσελίδα μας θα αντικατασταθούν από τα SVG(Scalable Vector Graphics) Fonts που επιλέξαμε. Μπορούμε να παρατηρήσουμε ότι αν γράψουμε Cufon.replace(‘p’); αντί για Cufon.replace(‘h1′); όλες οι παράγραφοι στην σελίδα μας θα αντικατασταθούν. Μπορούμε επίσης να συμπεριλάβουμε και πολλά στοιχεία μαζί γράφοντας για παράδειγμα

<script type="text/javascript">
Cufon.replace('h1');
Cufon.replace('h3');
Cufon.replace('p');
</script>

Τελικό Αποτέλεσμα

Πριν την αντικατάσταση

Μετά την αντικατάσταση

Hint/Tip

Για να μπορέσετε να επιλέξετε τα fonts που θέλετε στον generator, θα πρέπει να κάνετε copy τα fonts απο τον φάκελο Fonts που βρίσκεται στο C:\Windows\Fonts κάπου εκτός από αυτόν τον φάκελο, γιατί λόγο ασφάλειας, δεν επιτρέπεται η επιλογή fonts κατευθείαν από τον φάκελο Fonts.

Άν είστε ήδη συνδρομητής κάντε login με τα στοιχεία σας. Για να γίνετε συνδρομητής πατήστε εδώ