La proprietà  @font-face: usiamola con attenzione (parte 2)

Nella precedente "puntata", abbiamo parlato della proprietà  dei CSS chiamata @font-face e di come limitarne i problemi di compatibilità  con Internet Explorer. Bonificate le insidie di casa Microsoft, restano quelle di tutti gli altri browser. Stavolta, più che di mancata aderenza agli standard, dobbiamo preoccuparci di quei browser talmente vecchi, nei quali, tale proprietà  è completamente assente.

Come ovvio, ogni carattere ha le sue proporzioni, ad esempio, due set di caratteri alti 36 pixel avranno sicuramente la stessa altezza, mentre sarà  imprevedibile sapere quanto differiscano in larghezza. Immaginate di aver settato, con la proprietà  @font-face, un certo carattere e che il browser utente non supporti l'uso di tale proprietà . In casi come questo, dovremmo fare in modo di rimpiazzare il carattere "personalizzato" con un carattere sicuramente presente sul computer utente (Arial, Courier New...) e che, a parità  di altezza, abbia grosso modo la stessa larghezza e spaziatura del carattere "personalizzato".

body { font-family: Personalizzato, Verdana; }

Così facendo, se il browser non gestisce il carattere Personalizzato (perché non supporta la proprietà  @font-face) lo rimpiazzerà  con Verdana, che sarà  sicuramente presente sul computer utente.
In questo modo il problema è risolto solo a metà , in quanto, non è detto che riusciremo a trovare un carattere standard che abbia le stesse proporzioni di quello che si voleva imporare con @font-face. Dunque, servirà  uno strumento alternativo, che ci permetta di decidere esattamente come rimpiazzare il carattere personalizzato con uno standard e che ci lasci deciderne tutte le caratteristiche (altezza, stile, spaziatura...).

Grazie a Modernizr, abbiamo a disposizione un javascript che ispeziona il browser utente per capire quali sono le proprietà  CSS non supportate. Ad esempio, se la proprietà  @font-face non è supportata dal browser utente verrà  aggiunta al tag html la classe CSS no-fontface, a questo punto non ci resta altro che creare delle regole per tale classe.


.no-fontface body
{
    font-family: ...;
    ...
}
e fare in modo che una stringa di testo abbia uguali proporzioni sia che venga rappresentata con il carattere personalizzato, sia che venga rappresentata con le proprietà  scritte nella classe no-fontface. Così facendo i nostri layout non risulteranno mai "sballati".