ANDREA BACCOLINI
Web designer

CSSAward nominated
CSS Design Award nominated
CSS Reel Award nominated

CSS3: GUIDA AI @FONT-FACE

Argomenti: , , , , , ,

Autore: Andrea Baccolini

@font-face
Ago
16
2012

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 .

@font-face

 

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.

@font-face

 

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.

@font-face

Questo potrebbe provocare problemi di layout come mostrato nell’immagine qui sotto dove i caratteri di fallback si estendono fuori dal “bordo”.

@font-face

 

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.

@font-face

 

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.

@font-face

 

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“)

 

 

CSS3: GUIDA AI @FONT-FACE ultima modifica: 2012-08-16T17:51:45+00:00 da Andrea Baccolini

Articolo scritto o tradotto da Andrea Baccolini

Web designer freelance di Padova.
Specializzato in siti internet moderni, convalidati W3C e responsive.
Realizza temi per il CMS Wordpress. Indicizzazione sui motori di ricerca.

COMMENTA QUESTO ARTICOLO!

Per favore compila il captcha (richiesto):

Andrea Baccolini | Web designer Copyright 2012 - 2017 © Responsive design - Seguimi su Facebook e su Google+ - CF:BCCNDR76P08D325K.