Cufón: testo con font personalizzato in html



I siti dei giorni d’oggi sono sempre più pieni di grafica… che normalmente viene usata anche, per esempio, per rendere il testo di un menu di un font diverso da quelli tradizionali e supportati dai web browser.

Nel corso del tempo sono emerse varie soluzioni per poter rendere a video un testo semplice html in un font particolare tra cui l’ottimo sIFR ma in concorrenza a questo è nato un nuovo componente interamente javascript… cufón.

Le principali caratteristiche che mi hanno colpito e che tra l’altro sono le stesse che lo stesso autore elenca sono:

  • Nessun plugin particolare richiesto
  • Compatibilità con tutti i browser più comuni
  • Facilità di utilizzo
  • Velocità nella generazione del nuovo testo formattato

Per farvi capire al meglio come funziona cufón ecco un semplice esempio:

  • Procuriamoci il file”cufon-yui.js” direttamente dalla sezione download del sito ufficiale;
  • Attraverso il generatore di codice (disponibile sempre sul sito) è possibile creare un file javascript corrispondente al font che vogliamo utilizzare; per esempio ho caricato i files dei font Comic Sans MS e Wingdings ed il generatore mi ha restituito i files”Comic_Sans_MS_400.font.js” e “Wingdings_400.font.js”
  • Creiamo una semplice pagina come questa:
<html>
<head>
<title>Test cufón</title>
<head>
        <script src="cufon-yui.js" type="text/javascript"></script>
        <script src="Comic_Sans_MS_400.font.js" type="text/javascript"></script>
        <script src="Wingdings_400.font.js" type="text/javascript"></script>
        <script type="text/javascript">
            Cufon.replace('h1', { fontFamily: 'Comic Sans MS' });
            Cufon.replace('h2', { fontFamily: 'Wingdings' });
        </script>
    </head>
    <body>
        <h1>Questo testo è in Comic Sans MS</h1>
        <h2>Questo testo è in Wingdings</h2>
        <script type="text/javascript"> Cufon.now(); </script>
    </body>
</html>

Analizzando il codice si può notare che è bastato includere i files js nell’head della pagina ed attraverso il metodo Cufon.replace() non si è fatto altro che applicare a tutti gli h1 il font Comic Sand MS e agli h2 il Wingdings.

In fondo alla pagina prima del tag di chiusura del body è stato richiamato il metodo  Cufon.now() questo per un problema di Internet Explorer che causerebbe una latenza di rendering del font… un comando che diventerà comunque obsoleto nel rilascio delle prossime versioni (per aggiornare basterà sostituire il file core cufon-yui.js senza dover toccare il codice già esistente).

Il risultato  sarà simile a questo:

esempio cufón

A mio avviso cufón si presenta come una valida soluzione ed alternativa a sIFR (che fa uso di un plugin flash) e lascio a voi la curiosità di capire come funziona visitando il wiki.

Annunci sponsorizzati:
Condividi su Facebook Condividi su Twitter!
  • Michele

    se ci fai caso non c’è la lettera ‘è’ nell’esempio che fai (Questo testo in Comic Sans MS)

  • cassy

    Salve. Grazie per l’articolo. Perchè cufon in IE8 non funziona?

  • cassy

    Aiuto

  • Pingback: font personalizzato | lo stanzino di EngiMedia()

Pinterest