Certo, \u00e8 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.<\/p>\n
Oggi ti presentiamo la libreria Javascript Cufon e<\/span>d una sua utilizzazione pratica. Scaricare ed installare cufon sul proprio sito internet \u00e8 semplice e veloce, clicca qui per provare.<\/p>\n 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 \u00e8 possibile effettuare il download di un file, generato dal sistema interno di cufon del tipo: Nome_font.font.js<\/em>.<\/p>\n Quindi, includere questo file Javascript all’interno del proprio sito. E’ altres\u00ec necessario includere, nel proprio sito, anche la libreria di base di cufon scaricabile al seguente link: http:\/\/cufon.shoqolate.com\/js\/cufon-yui.js .<\/p>\n Inseriti gli script in questione \u00e8 necessario comunicare al nostro sito, dove applicare il font gestito:<\/p>\n <script type=”text\/javascript”> La funzione “replace” qui esemplificata accetta come parametro la lista dei selettori CSS ai quali applicare il font. Una particolarit\u00e0 interessante di cufon \u00e8 che la formattazione dell’elemento dipente UNICAMENTE dalle regole CSS applicate. Quindi, semplicemente, \u00e8 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\/ .<\/p>\n Applicato il funzionamento di base di Cufon potremmo, per\u00f2, 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?<\/p>\n Una case history<\/em> potrebbe essere la seguente.<\/p>\n Potremmo dover gestire un link al blog Artera come da immagine seguente.<\/p>\n <\/p>\n Cerchiamo di trovare la soluzione ottimale, utilizzando i CSS.<\/p>\n Creando un link ( <A> ) e inserendo all’interno due SPAN, uno per lo stato \u201cnormale\u201d e l’altro per lo stato \u201chover\u201d e gestendo la visualizzazione di uno dei due rispetto all’altro, tramite CSS, possiamo avere un bel link formattato e funzionante.<\/p>\n \n Ecco il codice HTML:<\/p>\n <a href=”https:\/\/blog.artera.net”> Il codice CSS:<\/p>\n a{ a span.normal{ a span.hover{ a:hover span.normal, a.selected span.normal, a span.hover{ a span.normal, a.selected span.hover, a:hover span.hover{ \n Tutto il funzionamento di visualizzazione dei due SPAN \u00e8 gestito dalle ultime due regole CSS:<\/p>\n a:hover span.normal, a.selected \tspan.normal, a span.hover<\/em><\/p>\n<\/li>\n a span.normal, a.selected \tspan.hover, a:hover span.hover<\/em><\/p>\n<\/li>\n<\/ul>\n Gestendo lo stato hover sull’A impostiamo la regola \u201cdisplay\u201d degli SPAN contenuti.<\/p>\n \n Et voil\u00e0 il gioco \u00e8 fatto<\/strong>. Clicca qui per scaricare i sorgenti di esempio.<\/p>\n \n","protected":false},"excerpt":{"rendered":" Uno dei problemi che la notte tengono svegli gli sviluppatori web \u00e8 la visualizzazione dei font sui siti internet. In attesa che la gestione dei font tramite CSS3 sia pi\u00f9 simpatica ad alcuni browser particolari noi programmatori non dobbiamo far altro che trovare alternative, pi\u00f9 leggere e veloci possibile, per la visualizzazione dei font particolari […]<\/p>\n","protected":false},"author":4,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_eb_attr":"","footnotes":""},"categories":[300],"tags":[67,68],"class_list":["post-259","post","type-post","status-publish","format-standard","hentry","category-marketing","tag-cufon","tag-font"],"yoast_head":"\n\n
\nCufon.replace(‘.cufon’);
\n<\/script><\/p><\/blockquote>\n![\"cufon-1\"](\"https:\/\/www.artera.net\/wp-content\/uploads\/2010\/02\/cufon-1.png\")
\n
\n<span>Visita il blog artera!<\/span>
\n<span>Visita il blog artera!<\/span>
\n<\/a><\/p><\/blockquote>\n\n
\nposition:relative;
\nfloat:left;
\ndisplay:inline;
\nfont-size:20px;
\ntext-transform:uppercase;
\ntext-decoration:none;
\n}<\/p>\n
\ncolor:#e59700;
\n}<\/p>\n
\ncolor:#4697da;
\n}<\/p>\n
\ndisplay:none;
\n}<\/p>\n
\ndisplay:inline;
\n}<\/p><\/blockquote>\n\n