Nella progettazione web lato tipografico, è sempre stata di grande importanza la scelta del carattere. Questa decisione inizialmente era sempre fatta in maniera scrupolosa, in modo da essere sicuri al 100% che il carattere utilizzato fosse presente su tutti i computer di tutti gli utenti che tentassero di visualizzarlo. Infatti si è sempre scelto in maniera sicura di optare per i caratteri standard, che di norma erano e sono presenti su tutti i sistemi operativi in circolazione.
Nel corso degli anni molti sono stati i tentativi per eludere questa standardizzazione dei caratteri. Abbiamo visto inizialmente l’utilizzo di metodi ,ormai obsoleti, come la sostituzione dei caratteri con immagini (oggi utilizzate forse solo per l’header della pagina o per zone del sito specifiche); per poi arrivare a metodi più complessi e un po’ troppo raffinati.
Alcuni esempi possono essere : sIFR, che è una combinazione di javascript , CSS e Flash e permette la visualizzazione del testo utilizzando Flash; questo metodo però, oltre a essere complesso ,non è consigliato su tutti i tipi di testo. Infatti si consiglia il solo uso per i titoli e di evitarlo sui link che vengono “mascherati” da flash. Altro esempio alternativo è typeface , che invece di utilizzare contenuti Flash come il precedente, propone un javascript chiamato typeface.js che permette di associarlo a contenuto HTML e di ottenere lo stesso risultato.
Un metodo più efficace, non complicato e che non necessita né di javascript nè di flash ( ma da utilizzare con attenzione) è la proprietà @font-face di cui ora analizzeremo la forma. Di seguito partiamo con questo esempio che è stato preso da un documento CSS:
@font-face {
font-family: MyFAmily;
src: local (“HelveticaNeue-Bold”);
url (myFamily.ttf) format(“truetype”);
}
body { font-family: MyFamily; }
La parte chiave di questa proprietà è l’attributo src che settato a local prova a caricare il font direttamente dal computer dell’utente. In caso contrario, se il font non dovesse essere presente sul computer dell’utente, la proprietà prosegue all’attributo url. Al nuovo carattere noi abbiamo assegnato il nome della famiglia Myfamily e questo nome lo useremo in tutto il nostro CSS; come si può vedere nel tag body.
L’attributo format invece serve per differenziare i caratteri TrueType da quelli OpenType. Tutto ciò sarebbe una soluzione perfetta e funzionale se non fosse che prima ci sono degli accorgimenti da fare: i CSS non sono interpretati tutti uguali dai broswer e il comportamento potrebbe variare (se usassimo Internet Explorer 6 il tutto sarebbe gestito diversamente, per esempio potrebbe consentire l’importazione solo di caratteri OpenType e sicuramente non permetterebbe neppure l’uso degli attributi local e format).
O addirittura browser ancora più vecchi potrebbero non riconoscere neanche la proprietà @font-face e quindi andare a sostituire con caratteri standard che sconvolgerebbero del tutto il nostro layout. A tal proposito è nato Modernizr ,una libreria javascript che ispezionando il browser dell’utente ci fa capire quali sono le proprietà CSS non supportate.
Infatti se la proprietà @font-face non sarà supportata dal browser verrà aggiunta al tag html la classe no-fontface; in tal caso, non resterà altro che creare una regola per quella classe come in questo esempio:
.no-fontface body
{
font-family:. . . ;
. . .
}
Agendo in questa maniera, il testo che vogliamo personalizzare avrà proporzioni uguali, sia che venga rappresentatata con carattere personalizzato, sia che venga visualizzato il carattere con le proprietà della classe no-font face da noi precedentemente impostata.
Applicando questa soluzione non rischieremo di avere layout rovinosi.
