Thursday, May 20, 2010

Αντικατάσταση Γραμματοσειρών με τη χρήση Cufón...

Leave a Comment
Σερφάροντας στο internet έπεσα πάνω σε κάτι που έψαχνα εδώ και καιρό.. αντικατάσταση γραμματοσειρών που δεν επηρεάζει το SEO. Είμαι σίγουρος ότι πολλοί από εσάς (web designers & developers) για πολύ καιρό τώρα (όπως κι εγώ) ψάχνετε τρόπους να βελτιώσετε εικαστικά τις ιστοσελίδες σας με γραμματοσειρές που δεν μπορούσατε να χρησιμοποιήσετε μέχρι στιγμής είτε γιατί ήταν αρκετά χρονοβόρο, είτε γιατί δεν ήταν πρακτικό και καθόλου φιλικό προς τις μηχανές αναζήτησης, μετατρέποντας τις γραμματοσειρές σε εικόνες.

Ένας τρόπος που είχε ήδη βρεθεί ήταν με την χρήση Flash (sIRF) και JavaScript αλλά με μειονέκτημα ότι έπρεπε να χρησιμοποιήσεις Flash, πράγμα το οποίο δεν αρέσει σε πολλούς - συν του ότι ήταν και λίγο αργό.

Η λύση ήρθε με το Cufón που χρησιμοποιεί μόνο JavaScript και είναι αρκετά μικρό σε μέγεθος περίπου 15 με 30kb. Προσθέτοντας, βέβαια, επιπλέον χαρακτήρες μεγαλώνει το μέγεθός του.


O τρόπος λειτουργίας του είναι πολύ απλός: κατεβάζεις το βασικό αρχείο javascript και ύστερα ανεβάζεις τη γραμματοσειρά που θέλεις ώστε να μετατραπεί κι αυτή σε javascript.

Έτσι απλά προσθέτεις τα JavaScript στην ιστοσελίδα σου:
<script type="text/javascript" src="cufon.js"></script>
<script type="text/javascript" src="Delicious.font.js"></script>

και έπειτα καλείς την JavaScript με τους σελέκτορες που θέλεις (p, h1, h2, etc)
<script type="text/javascript">
Cufon.replace('h1');
</script>

Εννοείται ότι λειτουργεί άψογα και με τους σελέκτορες του jQuery (εάν χρησιμοποιείτε)
<script type="text/javascript">
Cufon.replace('#cufon h1');
</script>

Κάντε μια δοκιμή και θα σας πείσει... Cufón

Υ.Γ.: Σχόλια και προτάσεις για το πώς μπορεί να χρησιμοποιηθεί ακόμα καλύτερα είναι πάντα ευπρόσδεκτα