Suggerimento rapido come lavorare con @ Font-face

A causa del fatto che @ font-face può essere un po 'troppo complicato, non ha attecchito quanto dovrebbe. Una volta che si inizia a leggere sulle licenze, i formati di font diversi, le consistenze del browser, può potenzialmente diventare più problematico di quanto valga.

Ma - in cinque minuti, cercherò di semplificare il processo di lavorare con caratteri personalizzati il ​​più possibile. Servizi come Font Squirrel aiutano a rendere l'attività un gioco da ragazzi!

CSS finale

 @ font-face font-family: 'blok-regular'; src: url ('type / Blokletters-Potlood.eot'); src: local ('Blokletters Potlood Potlood'), local ('Blokletters-Potlood'), url ('type / Blokletters-Potlood.ttf') format ('truetype');  @ font-face font-family: 'blok-italic'; src: url ('type / Blokletters-Balpen.eot'); src: local ('Blokletters Balpen Balpen'), local ('Blokletters-Balpen'), url ('type / Blokletters-Balpen.ttf') format ('truetype');  @ font-face font-family: 'blok-heavy'; src: url ('type / Blokletters-Viltstift.eot'); src: local ('Blokletters Viltstift Viltstift'), locale ('Blokletters-Viltstift'), url ('type / Blokletters-Viltstift.ttf') formato ('truetype');  h1 font-family: blok-heavy, helvetica, arial; 

Si noti come stiamo facendo riferimento a un carattere .eot e .ttf? Questo perché, ovviamente, Internet Explorer utilizza solo il proprio formato, che deve ancora prendere veramente piede. Pertanto, dobbiamo prima importare quel file .eot e poi passare ai diversi formati per Firefox, Safari, ecc. È essenziale caricare prima la versione .eot.

Successivamente, cerchiamo il carattere sul computer dell'utente utilizzando l'attributo "locale". Se è infondato, solo allora passiamo un url che caricherà il font.

Perché non provare a caricare i caratteri TTF?

Questa era sicuramente una preoccupazione. Se Explorer non può funzionare con il formato TrueType, non vogliamo perdere tempo a cercare di scaricare il font. Fortunatamente, a causa di tutti quegli attributi locali e delle virgole, IE non ne capirà nulla. In quanto tale, salterà semplicemente la linea tutti insieme, quindi, utilizzando solo la versione .eot.

• Seguici su Twitter o iscriviti al feed Nettuts + RSS per i migliori tutorial di sviluppo web sul web.