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
color
font-size
font-style
font-weight
letter-spacing
line-height
text-transform
options
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 color textShadow
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.
