Lavora con noi

JavaScript

Siti tematici

Speciali

Ajax

JavaScript » Articoli » Effetti e controlli Javascript

Pagine:

RSS Download

Cufon e la tipografia per il web

di: Filippo Buratti 15 Febbraio 2010

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>

Pagina successiva

Pagine: