Web Design  »  Articoli  »  Web design 

In questo articolo presenteremo quella che è, a detta di molti, una piccola rivoluzione della tipografia per il web, una soluzione che dà una risposta (parziale) a una domanda comune: è possibile incorporare un determinato font in un sito web?

Inman Flash Replacement e i suoi derivati

Ad Aprile 2004 Shaun Inman pubblica un articolo in cui presenta la IFR (Inman Flash Replacement), ovvero un modo per incorporare in pagine web un qualsiasi font grazie a Flash e Javascript. Da allora, sono uscite diverse varianti: in particolare si è rivelata molto promettente da subito la sIFR (scalable Inman Flash Replacement) creata da Mike Davidson a fine Agosto 2004 e, dopo diverse versioni, giunta alla 2.0 release Candidate 4 (una versione quasi definitiva). È di questa versione che ci occuperemo valutandone le caratteristiche, i pro e i contro.

sIFR: come funziona

Anzitutto vediamo subito l'esempio, che spiegheremo tra breve. Il principio di funzionamento della sIFR è un misto tra CSS, Javascript e Flash. Vediamolo in dettaglio:

• Javascript, se abilitato, verifica la presenza del Flash Player.
• In caso di riscontro positivo, lo script procede ad individuare uno o più elementi definiti da un sorta di selettore CSS passato come argomento della funzione principale.
• Questi elementi vengono nascosti da Javascript, e il loro contenuto è passato attraverso le flashVars ad un filmato Flash che incorpora un font specifico.
• Il filmato Flash, contenente il testo da rimpiazzare (che sarà selezionabile con il mouse) verrà quindi mostrato, cercando di occupare la stessa area del testo che sostituisce (da qui il termine "scalable").

Questo è il principio di funzionamento a grandi linee. C'è da evidenziare che se Javascript è disabilitato, o se il Flash Player (dalla versione 6 in poi) non è disponibile sul sistema dell'utente, verrà semplicemente mostrato il testo con l'eventuale presentazione CSS.

sIFR e Image Replacement a confronto

Fino all'uscita della IFR (e successivamente della sIFR) l'unico modo per avere un titolo con un determinato font era quello di preparare un'immagine, includerla come <img> o usare una tecnica di Le tecniche di Image Replacement. Quest'ultima soluzione si presenta molto più versatile rispetto all'uso di immagini nell'HTML, ma confrontandola con la sIFR perde molto del suo appeal. La sIFR infatti non richiede un file per ogni titolo, ma con un solo filmato Flash (più, come vedremo un file Javascript e due CSS) potremo rimpiazzare anche centinaia di titoli. La dimensione del file Flash (con estensione .swf) che contiene il font incorporato dipende soprattutto dalla dimensione del font stesso, ma si attesta intorno alla decina di KiloBytes. il problema è che la sIFR, per funzionare, richiede Javascript abilitato e il Flash Player dalla versione 6 disponibile, ma questi due requisiti sono entrambi presenti sul 90-95% dei browser degli utenti di internet.

Quando usare la sIFR

Questo articolo, che invito a leggere, riassume molto bene caratteristiche, pro e contro della sIFR. Quello che risulta è che si tratta di una tecnica accessibile, pratica ed piuttosto efficace. Con la sIFR potremo rimpiazzare titoli, link (anche con effetto hover) e intere sezioni di testo, dato che ha il supporto per il testo multi-linea. Andrebbe però usata esclusivamente per i titoli, e preferibilmente andrebbe evitata sui link. Questi infatti vengono "mascherati" da Flash, e non sarà possibile con la sIFR attiva controllare dove porta un link sulla barra di stato del browser.

Altri articoli

Altre guide

Altre newsletter