Cufón

Il metodo offerto da Cufón per includere i caratteri non standard sulle proprie pagine web nasce, e si impone, come alternativa alla tecnologia sIFR (basata principalmente sull'utilizzo di Flash). Prevede 2 fasi separate e fondamentali: la generazione del font (SVG e VML) e la visualizzazione tramite il motore di rendering (JavaScript, VML, HTML5 - canvas). Aspetti tecnici a parte, il grosso vantaggio di questa soluzione è la possibilità di convertire i propri font (TTF, OTF...) per poi utilizzarli nei progetti web based.


Utilizzo

1) Convertite il vostro font (assicurandovi di rispettare le licenze d'uso!) sul sito ufficiale cufon.shoqolate.com/generate.
2) Scaricate e salvate il file JS generato nella cartella del vostro progetto.
3) Nella stessa cartella, posizionate anche il file cufon-yui.js, scaricabile anch'esso dal sito ufficiale.
4) Infine, se avete bisogno di un selector, scaricate a vostra scelta: jQuery, Sizzle, MooTools, Dojo, Prototype o framework JavaScript analogo.
Quando tutti i file saranno in posizione inserite il seguente codice nel tag <head> della vostra pagina html (nella nostra demo abbiamo scaricato, convertito ed incorporato il noto font Lobster realizzato da Pablo Impallari:

<script src="jquery-1.5.min.js" type="text/javascript"></script>
<script src="cufon-yui.js" type="text/javascript"></script>
<script src="Lobster_400.font.js" type="text/javascript"></script>

A questo punto occorre rimpiazzare gli elementi desiderati con l'opportuno codice CSS... niente paura, la funzione JavaScript Cufon.replace() lo farà al posto vostro:

<script type="text/javascript">
    Cufon.replace('h1'); /* non richiede selector */
    Cufon.replace('#titolo'); /* su IE6-7 richiede un selector */
    Cufon.replace('.paragrafo'); /* su IE6-7 richiede un selector */
</script>

ed infine, prima di chiudere il tag </body>, inserite il seguente codice::

<script type="text/javascript">Cufon.now();</script>

 

Demo

Esempio di utilizzo di Cufón per includere in una pagina web il font Lobster.

 

Per commenti, scriveteci.