Cufon è una libreria Javascript per il font replacement che permette di utilizzare sul nostro sito qualunque tipo di carattere, senza il vincolo del ristretto numero delle famiglie di font normalmente utilizzabili per il web. Impiegato nelle voci di un menu e nelle intestazioni, può aiutare a conferire alle nostre pagine un design più accattivante e un aspetto tipografico originale.
Il funzionamento di Cufon è basato su due diversi motori di rendering del testo: l'interfaccia VML, per il supporto di Internet Explorer, e l'elemento HTML 5 Canvas per i browser standard (leggi Safari, Firefox, Opera, Chrome). La documentazione ufficiale si trova su GitHub.
Conversione del font
Fondamentale è disporre del font che si vuole utilizzare (sono supportati tutti i formati più diffusi, .ttf, .otf, PFB e Postscript) e assicurarsi che la sua licenza d'uso ne permetta l'embed in un documento HTML. Per gli esempi dell'articolo ho utilizzato nelle sue varianti un font Open Type, Museo, un carattere scaricabile e liberamente utilizzabile con Cufon.
Attraverso il convertitore online del sito ufficiale dello script, è necessario processare il font scelto: il risultato della conversione è un file Javascript contenente un oggetto JSON. Oltre a questo, è necessario effettuare anche il download dello script vero e proprio, disponibile nel formato sorgente o nella versione compressa con YUI.
Installazione di Cufon
L'installazione di base prevede il collegamento degli script nell'<head> del documento HTML: per migliorare la velocità di rendering nei browser Microsoft è necessario richiamare un apposito metodo di Cufon, Cufon.now(), subito prima della chiusura del tag <body>. È caldamente consigliato adottare un doctype di tipo strict (o HTML 5) e la codifica UFT-8.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Cufon</title>
<script type="text/javascript" src="js/cufon.js"></script>
<script type="text/javascript" src="js/Museo_500_400.font.js"></script>
</head>
<body>
<!-- i nostri contenuti e il testo da rimpiazzare con Cufon -->
<script type="text/javascript"> Cufon.now(); </script>
</body>
</html>Utilizzo delle API: lo script in azione
Le API di Cufon mettono a disposizione quattro metodi, ognuno delegato allo svolgimento di una diversa funzionalità:
Cufon.replace(selector[, options])Cufon.refresh([selector, ..])Cufon.set(option, value)- il già menzionato
Cufon.now()
Il metodo principale è Cufon.replace(), che come è facile capire, è la funzione delegata a rimpiazzare l'originario testo HTML con l'immagine generata con VML o Canvas.
Questo metodo accetta due parametri: il primo (obbligatorio) è selector, e serve a identificare il testo da rimpiazzare: può essere un elemento HTML o il metodo del DOM document.getElementsByTagName(). In realtà nei browser più moderni è possibile utilizzare con grande comodità anche i selettori CSS (compresi i selettori CSS 2 e CSS 3). Internet Explorer purtroppo non dispone nativamente di un selector engine, tuttavia l'inconveniente è facilmente ovviabile utilizzando Cufon in combinazione al nostro framework Javascript preferito (JQuery, Prototype, Mootools...), con l'accortezza di includerlo prima di Cufon. Gli esempi di questo articolo sono stati realizzati con Sizzle, un selector engine particolarmente leggero e veloce non dipendente da librerie.
Vediamo subito dal primo esempio alcune delle possibili combinazioni con cui è possibile accedere agli elementi da rimpiazzare:
<script type="text/javascript">
Cufon.replace('h1');
Cufon.replace('h2');
Cufon.DOM.ready(function() {
Cufon.replace(document.getElementsByTagName('h4'));
});
// da quì è richiesto un selector engine o un framework: Sizzle, Jquery, Prototype, Mootols
Cufon.replace('#message');
Cufon.replace('ul.list li');
// rimpiazza tutti i tag <h3> meno quelli con classe "noreplace"
Cufon.replace('h3:not([class=noreplace])');
// una variante compatta delle chiamate precedenti...
// Cufon.replace('h3:not([class=noreplace])')('h1')('h2')('#message')('ul.list li');
</script>Il secondo parametro del metodo Cufon.replace (options) è facoltativo ed è costuito da un hash di varie proprietà che ci permettono di "customizzare" l'applicazione dello script. Per cominciare è bene precisare prima le proprietà tipografiche dell'aspetto del testo che se utilizzate vanno specificate direttamente nel CSS del documento: color, font-size, font-style, font-weight, letter-spacing, line-height, text-transform. Per le proprietà che è invece possibile inserire nell'oggetto options ecco una breve descrizione delle più utili:
- fontFamily: consente di specificare il nome del carattere che si desidera utilizzare: se la proprietà viene omessa è utilizzato l'ultimo font incluso nel tag
<script>. Ecco un esempio con l'applicazione di due diversi font. - hover: se true abilita l'effetto hover del mouse sull'elemento (disabilitato per impostazione predefinita). In questo caso ho predisposto un esempio con l'utilizzo su un menu orizzontale.
- separate: serve a specificare come separare le parti di testo. I valori possibili sono ‘none’, ‘characters’ e ‘words’, che è quello predefinito, con la migliore resa in presenza di un testo multi-riga.
- textShadow: rende il testo ombreggiato, e il risultato è l'equivalente cross-browser dell'omonima proprietà CSS 3.
Cufon.refresh()
Cufon.refresh() è un metodo utilissimo quando è necessario aggiornare o inserire un blocco di testo con una chiamata Ajax, o ancora quando si vogliono modificare le dimensioni del testo; in pratica viene attuato un refresh a una precedente chiamata di Cufon.replace(). Se passiamo nel metodo il parametro selector possiamo circoscriverne l'utilizzo su un determinato numero di elementi.
// JQuery
$('placeholder').load('/feed', Cufon.refresh);
// Prototype
new Ajax.Updater('placeholder', '/feed', { onComplete: Cufon.refresh });
// Mootools
$('placeolder').set('load', { onSuccess: Cufon.refresh }).load('/feed');Cufon.set()
Questo metodo di Cufon consente di specificare dei valori predefiniti per le opzioni del testo, evitando di riscriverli inutilmente ove fossero applicati più volte.
Cufon.set('fontFamily', 'custom font');
Cufon.replace('h1')('h2');
Cufon.set('fontFamily', 'other font');
Cufon.replace('h3')('h4');
// equivalente
Cufon.set('fontFamily', 'custom font').replace('h1')('h2');
Cufon.set('fontFamily', 'other font').replace('h3')('h4')
// equivalente
Cufon.replace('h1', { fontFamily: 'custom font' });
Cufon.replace('h2', { fontFamily: 'custom font' });
Cufon.replace('h3', { fontFamily: 'other font' });
Cufon.replace('h4', { fontFamily: 'other font' });Effetti avanzati sul testo
Una volta presa confidenza con gli strumenti base di Cufon, possiamo approfondire le possibilità di styling del testo, scoprendo altre interessanti modalità d'uso. Innanzitutto Cufon permette di superare i problemi di compatibilità nell'utilizzo del testo ombreggiato con la proprietà textShadow. Di più, per il colore del testo, in luogo delle monotone tinte piatte è possibile utilizzare dei gradienti lineari! Vediamo subito come realizzare con il solo Cufon degli effetti che diversamente avrebbero richiesto l'utilizzo di un software di grafica come Photoshop.
Cufon.replace('h1#swatch-one', {
color: '-linear-gradient(#ff0000, 0.50=#ffcc00)'
});
Cufon.replace('h1#swatch-two', {
color: '-linear-gradient(#70b6f2, 0.49=#a7d1f8, 0.50=#54a3ee, #1a62db)'
});
Cufon.replace('h1#swatch-tree', {
color: '-linear-gradient(#c9ff30, #72d915)',
textShadow: '#333 2px 2px'
});
Cufon.replace('h1#swatch-four', {
color: '-linear-gradient(0.15=#c141a4, 0.49=#ff7ad7, 0.50=#a80077, #db34a4)',
textShadow: '-2px -2px #333'
})Ecco il codice in opera nell'ultimo esempio: nella dichiarazione dell'opzione color si possono utilizzare due o anche più colori (è accettato indifferentemente il valore esadecimale o RGB) che vanno specificati dall'alto verso il basso. Notare la particolare sintassi richiesta (valori possibili da 0 a 1) per gestire manualmente la posizione delle tinte nel gradiente. Per quanto riguarda l'utilizzo dell'ombreggiatura è necessario assegnare tre valori nella proprietà textShadow: l'offset x e y (espressi in px) e il colore dell'ombra.
Considerazioni finali.
Per esperienza personale, avendo esplorato approfonditamente le numerose soluzioni disponibili per il font replacement (SIFR3, Facelift, Typeface, etc) posso dire che Cufon rappresenta sicuramente un'ottima scelta. Certo non è scevro da difetti, in quanto purtroppo il testo rimpiazzato non è selezionabile e non è possibile utilizzare il "giustificato". Inoltre non è particolarmente comodo dover ricorrere al convertitore online ogni volta che si vuole utilizzare un nuovo carattere. Vanta però un funzionamento pressochè impeccabile su ogni browser, non pregiudica l'accessibilità, non interferisce nella stampa delle pagine, è ben documentato e semplice da utilizzare e gli effetti ottenibili sono molto gradevoli.
Piuttosto, grazie al sempre più ampio supporto dei browser verso le specifiche dei CSS 2 e 3, i tempi sono ormai maturi per utilizzare la direttiva @font-face nella dichiarazione delle famiglie di caratteri. Proprio un recente articolo di Cesare Lamanna illustra una tecnica per applicare questa regola e renderla compatibile anche con Internet Explorer.
Sempre al riguardo voglio segnalare due soluzioni simili, forse un po' eccessive ma fondamentalmente interessanti, che ricorrono a seconda del supporto fornito dal browser all'utilizzo alternativo di Cufon e @font-face: maggiori informazioni sono quì e quì.
Il codice e gli esempi di Cufon sono disponibili per il download.
