Sebbene i CSS3 @font-face siano supportati dalla maggior parte dei principali browser (IE, Firefox, Chrome e Safari), non tutti li visualizzano.
Quando ciò non avviene, il tuo font personalizzato potrebbe “rompere” il layout o “uscire dai bordi” con risultati indesiderati.
In questo articolo, vi spiegherò i problemi comuni con l’utilizzo di font personalizzati, come scegliere il web fonts safe fallback corrispondente e come creare un perfetto stile fallback con Modernizr.
Errore comune
Un errore comune che molte persone fanno quando si implementa i font personalizzati è quello di non specificare i tipi di carattere di fallback o scaricare i font fallback sbagliati .
Web safe Fallback Fonts
Quando si utilizzano i font personalizzati, è importante includere i web safe fallback fonts.
Il tipo di carattere di fallback aiuta a mantenere il vostro disegno coerente quando il @font-face non è supportato o disponibile.
Il punto chiave per la selezione di font fallback è che va a prendere il web safe fonts sicuro che meglio corrispondono al tipo di carattere personalizzato.
Ad esempio, se il tipo di carattere personalizzato è Clarendon, i migliori web safe fallback font è Georgia perché sono entrambi nella classificazione di serif e hanno larghezza di carattere simile.
Problemi di layout
Poiché ogni font-face ha la propria larghezza, altezza, peso, crenatura (letter-spacing), ecc., alcuni caratteri non sono sostituibili con i tipi di carattere web safe.
Date un’occhiata all’esempio riportato di seguito.
È un confronto tra un filo (tipo di carattere personalizzato) e Arial (web safe font) entrambi 36pt maiuscolo.
Come si può vedere, il testo Arial prende più che del doppio di spazio rispetto allo spazio del testo con carattere filo perché Arial ha una larghezza più ampia e la crenatura.
Questo potrebbe provocare problemi di layout come mostrato nell’immagine qui sotto dove i caratteri di fallback si estendono fuori dal “bordo”.
Modernizr
Fortunatamente, c’è un Javascript chiamato Modernizr che può aiutare a risolvere il problema, come accennato in precedenza.
Modernizr è un Javascript che rileva quali caratteristiche CSS3 sono supportati dal browser.
Poi si aggiunge una classe CSS nell’elemento per indicare se le funzioni sono supportate.
Ad esempio, se non è supportato il @font-face, aggiungerà la classe “no-fontface” nell’elemento (es. <html class=”no-fontface”> ).
Queste classi CSS vengono aggiunte con Javascript e non sono visibili nel codice sorgente.
Per visualizzarle, è necessario controllare il codice della pagina o esaminare l’elemento sorgente generato.
Gli stili di Font fallback con Modernizr
Possiamo quindi utilizzare Modernizr per rilevare se il @font-face è supportato e fornire in alternativa corrispondenti stili di caratteri fallback.
Per esempio, è possibile modificare gli stili per i caratteri di fallback (dimensioni, lettera-spazio, peso, text-transform, ecc.) per meglio abbinare il tipo di carattere personalizzato.
Implementare Modernizr
Per implementare Modernizr, è necessario andare alla homepage (http://modernizr.com), seguire le istruzioni e includerlo nel documento html.
<script src="js/modernizr.js"></script>
.no-fontface CSS
Poi avrete bisogno di una regola aggiuntiva per specificare il .no-fontface. Osserva questa demo per vedere il risultato finale.
/* wire one font */
h1 {
font-family: 'Wire One', arial, serif;
font-weight: bold;
font-size: 48px;
letter-spacing: 1px;
text-transform: uppercase;
}
/* no-faceface fallback */
.no-fontface h1 {
font-family: Arial, Helvetica, sans-serif;
font-weight: normal;
font-size: 30px;
letter-spacing: 0;
text-transform: none;
}
(traduzione dell’articolo “CSS3 @font-face Design Guide” del blog “Web designer wall“)
