Al grafico non far sapere….

..che ci sono sistemi per l’embedding dei font nelle pagine web.
Sto parlando del più famoso sIFR (ora alla terza versione) di Cufon e diversi altri (tra cui il recente Typekit), script grazie ai quali si può utilizzare qualunque carattere all’interno di una pagina html.

In un mondo perfetto avremmo un ottimo supporto ai caratteri anche nei browser, ma così non è, quindi ci teniamo la nostra manciata di font sempre uguali (qualcuno ha detto verdana?) e tiriamo avanti sopravvivendo al dispiacere di non poter godere di opere come quelle che per esempio ci elenca quotidianamente typojungle.
Siamo costretti a questo dal fatto che ogni computer può visualizzare solo i font che ha installati.

Alla terribile ingiustizia che chi può si gode l’Helvetica mentre gli altri si beccano l’Arial purtroppo non c’è rimedio (tranne flash naturalmente), ma per piccoli pezzetti di testo, tipicamente i titoli si può supplire sostituendo la scritta in html con un analogo in flash (o un’immagine).

sIFR fa la scelta di utilizzare il javascript per sostituire l’elemento indicato e tutti i suoi figli con un filmato in flash delle stesse dimensioni (quasi).
sIFR3 risulta abbastanza semplice da aggiungere ad una pagina i passi riassunti brutalmente sono solo 4:

1. Avere il file .swf: non richiede quasi preparazione, infatti basta aprire il .fla fornito nel pacchetto, cancellare il testo, impostare il font che si vuole utilizzare e pubblicare il filmato.
2. includere nella pagina il css sifr.css:

   1

3. includere nella pagina i file sifr.js e sifr-confg.js:

   1 2	<script src="/path/to/sifr.js" type="text/javascript"><!--mce:0--></script> <script src="/path/to/sifr-config.js" type="text/javascript"><!--mce:1--></script>

4. inserire nel sifr-config.js i filmati da attivare, dove attivarli e le impostazioni da usare (color, background ed altre amenità “simil css”.
   Una minima configurazione comprende:

   1 2 3

   var strangeFont = { src: "/path/to/strangefont.swf" } //il path è relativo alla pagina che carica il filmato sIFR.activate(strangeFont); // ci deve essere un solo "activate" per ogni sIFR, ma è possibile la sintassi sIFR.activate(font1,font2,font3,...,fontN) sIFR.replace(strangeFont, {selector: 'h1'}); // .className per le classi #idValue per gli id

Probabilmente seguendo questi 4 step la pagina ora fa un po’ schifo, le cose migliorano molto dopo aver scoperto che sIFR.replace() consente una sintassi css-like ed infatti:

1

sIFR.replace(strangeFont, {selector:'h1', css:['.sIFR-root{color:#ff0000; font-size:10px}']}

trasforma tutti gli <h1> della pagina in un bel colore rosso puro e corpo 10. Attenzione, non ho scritto il codice del colore a 6 cifre in quanto masochista, ma perchè flash non riconosce l’abbreviazione a 3 cifre come fanno i css.

Altre cose a cui fare stare attenti:

• se lo sfondo non è uniforme sIFR.replace() ci consente l’opzione transparent:true
• a sIFR.replace() possono essere aggiunti tutti gli stili che vogliamo, quindi è perfettamente valida la sintassi css['sIFR-root{...}','.class{...}'] purchè i selettori siano tutti figli dell’elemento da sostituire. è comunque da tenere presente che questo sistema non è perfetto e quindi utilizzarlo può far venire mal di testa ed insoddisfazione. Molto meglio è utilizzare diversi sIFR.replace() con i selettori ordinati dal più particolare al più generale. Per esempio

  1 2 3 4

  sIFR.replace('ul#main li.selected'); sIFR.replace('ul#main li'); sIFR.replace('li.selected'); sIFR.replace('li');

  In questo modo si dovrebbero avere meno mal di testa, ma non è vero, solo l’esperienza fa passare questo tipo di malesseri.

• sIFR calcola l’ingombro del filmato flash in base all’ingombro che ha l’oggetto che deve sostituire, può capitare che il js di sIFR si esegua prima che l’ingombro venga assegnato (es. Safari carica in parallelo css e js) provocando uno strano aspetto alla pagina. Per verificare che il problema sia questo basta ridimensionare la finestra del browser, se va tutto a posto la questione è proprio questa.
  Per risolvere questo problema bisogna applicare qualche hack che ritardi l’esecuzione del js fino al momento giusto
• evitare di sostituire i link. sIFR non può sostituire direttamente i tag <a> quindi bisogna applicarlo ad un elemento padre. A mio parere il gioco non vale la candela

In conclusione sIFR è sicuramente uno script ottimamente programmato a partire da un’idea intelligente, ma a me non piace.
Per quanto io sia un amante della tipografia sostituire del testo con altri oggetti non è una soluzione è un hack per aggirare il problema e come tutti gli hack non conduce ad un risultato perfetto.
Naturalmente a piccole dosi può produrre un risultato ottimo, ma il confine è così sottile che la differenza tra usarlo ed abusarlo è troppo facile da superare.

Per quel che riguarda gli altri sistemi di embedding dei font ancora non li ho provati e tantomeno messi in produzione.
Non ho intenzione di provare Cufon perchè il testo sostituito non è selezionabile (in quanto immagine) e questo mi sembra un grosso sgarbo nei confronti dell’utente.

Typekit invece che cos’è? questo di bradcolbow.com è un mirabile riassunto, quello che penso io è che potrebbe essere un buon sistema, vedremo.