Uno dei problemi che la notte tengono svegli gli sviluppatori web è la visualizzazione dei font sui siti internet. In attesa che la gestione dei font tramite CSS3 sia più simpatica ad alcuni browser particolari noi programmatori non dobbiamo far altro che trovare alternative, più leggere e veloci possibile, per la visualizzazione dei font particolari sui nostri siti internet.
Certo, è possibile creare wrapper per gestire il controllo del browser e quindi affiancare a regole standard CSS3 per i browser supportati, altre operazioni per la visualizzazione del font nei browser meno potenti (leggi: IE), ma oggi ci occuperemo solo di presentare una di queste alternative. Uno dei prossimi post potrebbe essere lo sviluppo di un wrapper per la gestione dei font in base al browser.
Oggi ti presentiamo la libreria Javascript Cufon ed una sua utilizzazione pratica. Scaricare ed installare cufon sul proprio sito internet è semplice e veloce, clicca qui per provare.
In pochi passi, inserendo il file del font che si vuole gestire (in formato TTF, OTF, PFB, PostScriptFont) per le varie formattazioni (Regular, Bold, Italic, Bold-Italic) e specificando le opzioni desiderate è possibile effettuare il download di un file, generato dal sistema interno di cufon del tipo: Nome_font.font.js.
Quindi, includere questo file Javascript all’interno del proprio sito. E’ altresì necessario includere, nel proprio sito, anche la libreria di base di cufon scaricabile al seguente link: http://cufon.shoqolate.com/js/cufon-yui.js .
Inseriti gli script in questione è necessario comunicare al nostro sito, dove applicare il font gestito:
<script type=”text/javascript”>
Cufon.replace(‘.cufon’);
</script>
La funzione “replace” qui esemplificata accetta come parametro la lista dei selettori CSS ai quali applicare il font. Una particolarità interessante di cufon è che la formattazione dell’elemento dipente UNICAMENTE dalle regole CSS applicate. Quindi, semplicemente, è necessario specificare le regole CSS nel foglio di stile utilizzato nella pagina WEB e inserire il selettore CSS come parametro della funzione replace. Per la guida completa su come usare Cufon vai al link http://wiki.github.com/sorccu/cufon/ .
Applicato il funzionamento di base di Cufon potremmo, però, riscontrare un ostacolo di gestione per i link aventi stati HOVER: come facciamo a cambiare il colore del testo se Cufon per visualizzare il font crea con Javascript un codice interno statico?
Una case history potrebbe essere la seguente.
Potremmo dover gestire un link al blog Artera come da immagine seguente.
Cerchiamo di trovare la soluzione ottimale, utilizzando i CSS.
Creando un link ( <A> ) e inserendo all’interno due SPAN, uno per lo stato “normale” e l’altro per lo stato “hover” e gestendo la visualizzazione di uno dei due rispetto all’altro, tramite CSS, possiamo avere un bel link formattato e funzionante.
Ecco il codice HTML:
<a href=”https://blog.artera.net”>
<span>Visita il blog artera!</span>
<span>Visita il blog artera!</span>
</a>
Il codice CSS:
a{
position:relative;
float:left;
display:inline;
font-size:20px;
text-transform:uppercase;
text-decoration:none;
}a span.normal{
color:#e59700;
}a span.hover{
color:#4697da;
}a:hover span.normal, a.selected span.normal, a span.hover{
display:none;
}a span.normal, a.selected span.hover, a:hover span.hover{
display:inline;
}
Tutto il funzionamento di visualizzazione dei due SPAN è gestito dalle ultime due regole CSS:
-
a:hover span.normal, a.selected span.normal, a span.hover
-
a span.normal, a.selected span.hover, a:hover span.hover
Gestendo lo stato hover sull’A impostiamo la regola “display” degli SPAN contenuti.
Et voilà il gioco è fatto. Clicca qui per scaricare i sorgenti di esempio.
