La @font-faceregola consente di caricare caratteri personalizzati su una pagina web. Una volta aggiunta a un foglio di stile, la regola indica al browser di scaricare il carattere da dove è ospitato, quindi visualizzarlo come specificato nel CSS.
Senza la regola, i nostri design sono limitati ai caratteri già caricati sul computer di un utente, che variano a seconda del sistema utilizzato. Ecco una bella ripartizione dei caratteri di sistema esistenti.
Supporto browser più profondo possibile
Questo è il metodo con il supporto più profondo possibile in questo momento. La @font-faceregola dovrebbe essere aggiunta al foglio di stile prima di qualsiasi stile.
@font-face ( font-family: 'MyWebFont'; src: url('webfont.eot'); /* IE9 Compat Modes */ src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('webfont.woff2') format('woff2'), /* Super Modern Browsers */ url('webfont.woff') format('woff'), /* Pretty Modern Browsers */ url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */ url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */ )Quindi usalo per modellare elementi come questo:
body ( font-family: 'MyWebFont', Fallback, sans-serif; )Livello pratico di supporto del browser
Le cose si stanno spostando pesantemente verso WOFF e WOFF 2, quindi probabilmente possiamo farla franca:
@font-face ( font-family: 'MyWebFont'; src: url('myfont.woff2') format('woff2'), url('myfont.woff') format('woff'); )| Cromo | Safari | Firefox | musica lirica | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 5+ | 5.1+ | 3.6+ | 11,50+ | 9+ | 4.4+ | 5.1+ |
Supporto browser leggermente più profondo
Se hai bisogno di una sorta di mezzo felice tra supporto completo e supporto pratico, questo coprirà alcune basi in più:
@font-face ( font-family: 'MyWebFont'; src: url('myfont.woff2') format('woff2'), url('myfont.woff') format('woff'), url('myfont.ttf') format('truetype'); )| Cromo | Safari | Firefox | musica lirica | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 3.5+ | 3+ | 3.5+ | 10.1+ | 9+ | 2.2+ | 4.3+ |
Supporto browser super progressivo
Se stiamo puntando la fattoria su WOFF, allora possiamo aspettarci che le cose si spostino verso WOFF2 a un certo punto nel tempo. Ciò significa che possiamo vivere al limite con:
@font-face ( font-family: 'MyWebFont'; src: url('myfont.woff2') format('woff2'); )| Cromo | Safari | Firefox | musica lirica | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 36+ | No | 35+ con bandiera | 23+ | No | 37 | No |
Tecniche alternative
@import
Sebbene @font-facesia eccellente per i caratteri ospitati sui nostri server, potrebbero esserci situazioni in cui una soluzione di caratteri ospitati è migliore. Google Fonts offre questo come un modo per utilizzare i loro caratteri. Il seguente è un esempio di utilizzo @importper caricare il carattere Open Sans da Google Fonts:
@import url(//fonts.googleapis.com/css?family=Open+Sans);Quindi possiamo usarlo per modellare gli elementi:
body ( font-family: 'Open Sans', sans-serif; )Se apri l'URL del carattere, puoi effettivamente vedere tutto il @font-facelavoro svolto dietro le quinte.
Un vantaggio dell'utilizzo di un servizio ospitato è che è probabile che includa tutte le varianti del file dei caratteri, il che garantisce una profonda compatibilità tra browser senza dover ospitare tutti quei file da soli.
Vedi la penna che usa @import per i caratteri personalizzati di CSS-Tricks (@ css-tricks) su CodePen.
ing un foglio di stile
Allo stesso modo, potresti creare un collegamento alla stessa risorsa come faresti con qualsiasi altro file CSS, nel documento HTML anziché nel CSS. Utilizzando lo stesso esempio di Google Fonts, questo è ciò che useremmo:
Quindi, possiamo modellare i nostri elementi come gli altri metodi:
body ( font-family: 'Open Sans', sans-serif; )Di nuovo, si tratta di importare le @font-faceregole ma, invece di iniettarle nel nostro foglio di stile, vengono invece aggiunte al nostro HTML .
Vedere Pen Using per i caratteri personalizzati di CSS-Tricks (@ css-tricks) su CodePen.
È più o meno la stessa cosa ... entrambe le tecniche scaricano le risorse necessarie.
Comprensione dei tipi di file di font
Lo snippet originale all'inizio di questo post fa riferimento a molti file con strane estensioni. Esaminiamo ciascuno di essi e capiamo meglio cosa significano.
WOFF / WOFF2
Sta per: Web Open Font Format.
Creati per l'uso sul Web e sviluppati da Mozilla insieme ad altre organizzazioni, i caratteri WOFF spesso si caricano più velocemente di altri formati perché utilizzano una versione compressa della struttura utilizzata dai caratteri OpenType (OTF) e TrueType (TTF). Questo formato può anche includere metadati e informazioni sulla licenza all'interno del file del carattere. Questo formato sembra essere il vincitore e dove sono diretti tutti i browser.
WOFF2 è la prossima generazione di WOFF e vanta una compressione migliore dell'originale.
SVG / SVGZ
Sta per: Scalable Vector Graphics (Font)
SVG è una ricreazione vettoriale del carattere, che lo rende molto più leggero nelle dimensioni del file e lo rende ideale anche per l'uso mobile. Questo formato è l'unico consentito dalla versione 4.1 e precedenti di Safari per iOS. I caratteri SVG non sono attualmente supportati da Firefox, IE o IE Mobile. Firefox ha posticipato l'implementazione a tempo indeterminato per concentrarsi su WOFF.
SVGZ è la versione zippata di SVG.
EOT
Sta per: tipo aperto incorporato.
Questo formato è stato creato da Microsoft (gli innovatori originali di @font-face) ed è uno standard di file proprietario supportato solo da IE. In effetti, è l'unico formato che IE8 e versioni precedenti riconosceranno durante l'utilizzo @font-face.
OTF / TTF
Sta per: OpenType Font e TrueType Font.
Il formato WOFF è stato inizialmente creato come reazione a OTF e TTF, in parte perché questi formati potrebbero essere facilmente (e illegalmente) copiati, tuttavia, OpenType ha funzionalità a cui molti designer potrebbero essere interessati (legature e simili).
Una nota sulle prestazioni
I caratteri Web sono ottimi per il design, ma è importante comprendere anche il loro impatto sulle prestazioni Web. I caratteri personalizzati spesso causano un calo delle prestazioni dei siti perché il carattere deve essere scaricato prima di essere visualizzato.
Un sintomo comune era un breve momento in cui i caratteri si caricano prima come fallback, quindi lampeggiano al carattere scaricato. Paul Irish ha un vecchio post su questo (soprannominato "FOUT": Flash Of Unstyled Text).
In questi giorni, i browser generalmente nascondono il testo prima che il carattere personalizzato venga caricato per impostazione predefinita. Meglio o peggio? Tu decidi. Puoi esercitare un certo controllo su questo attraverso varie tecniche. Un po 'fuori portata per questo articolo, ma ecco una tripletta di articoli di Zach Leatherman per iniziare nella tana del coniglio:
- Better @ font-face con gli eventi di caricamento dei caratteri
- Come utilizziamo i caratteri web in modo responsabile o, evitando un @ font-face-palm
- Flash of Faux Text, ancora di più sul caricamento dei caratteri
Ecco alcune ulteriori considerazioni quando si implementano i caratteri personalizzati:
Guarda la dimensione del file
I caratteri possono essere sorprendentemente pesanti, quindi propendi per opzioni che offrono versioni più leggere. Ad esempio, preferisci un set di caratteri di 50 KB rispetto a uno che pesa 400 KB.
Limita il set di caratteri, se possibile
Hai davvero bisogno dei pesi in grassetto e nero per un carattere? Limitare i set di caratteri per caricare solo ciò che viene utilizzato è una buona idea e qui ci sono alcuni buoni suggerimenti.
Considera i caratteri di sistema per schermi piccoli
Molti dispositivi sono bloccati su connessioni scadenti. Un trucco potrebbe essere quello di scegliere come target schermi più grandi quando si carica il carattere personalizzato utilizzando @media.
In questo esempio, agli schermi più piccoli di 1000 px verrà servito un carattere di sistema e agli schermi larghi e superiori verrà offerto il carattere personalizzato.
@media (min-width: 1000px) ( body ( font-family: 'FontName', Fallback, sans-serif; ) )Servizi di font
Esistono numerosi servizi che ospiteranno i caratteri e forniranno anche l'accesso ai caratteri con licenza commerciale. I vantaggi dell'utilizzo di un servizio spesso si riducono alla consegna efficiente di un'ampia selezione di caratteri legali (ad esempio, servendoli su una CDN veloce).
Ecco alcuni servizi di font ospitati:
- Tipografia cloud
- Typekit
- Fontdeck
- Webtype
- Fontspring
- Typotheque
- Fonts.com
- Google Fonts
- Carattere scoiattolo
E i caratteri icona?
È vero, @ font-face può caricare un file di font pieno di icone che possono essere utilizzate per un sistema di icone. Tuttavia, penso che tu stia molto meglio usando SVG come sistema di icone. Ecco un confronto dei due metodi.
Più risorse
- Nozioni di base sull'API di Google Font
- Famiglie di caratteri CSS