Introduzione
La funzionalità @font-face di CSS3 ci consente di usare caratteri tipografici personalizzati sul web in modo accessibile, manipolabile e scalabile. Potresti però dire: "Perché dovremmo usare @font-face se abbiamo Cufon, sIFR e se usiamo testo nelle immagini?" Ecco alcuni vantaggi dell'utilizzo di @font-face per i caratteri personalizzati:
- Ricercabilità completa tramite Trova (
ctrl-F) - Accessibilità alle tecnologie per la disabilità come gli screen reader
- Il testo è traducibile tramite servizi di traduzione o di traduzione integrati nel browser
- Il CSS ha tutte le possibilità di modificare la visualizzazione tipografica:
line-height,letter-spacing,text-shadow,text-aligne selettori come::first-lettere::first-line
L'essenza di @font-face
In estrema sintesi, dichiariamo un nuovo carattere remoto personalizzato da utilizzare in questo modo:
@font-face {
font-family: 'Tagesschrift';
src: url('tagesschrift.ttf');
}
Poi utilizza:
h1, h2, h3 { font-family: 'Tagesschrift', 'Georgia', serif; }
In questa dichiarazione @font-face stiamo utilizzando la proprietà font-family per assegnare un nome esplicito al carattere. Può essere qualsiasi cosa, indipendentemente dal nome effettivo del carattere; font-family: 'SuperDuperComicSans'; andrebbe bene, anche se forse non per la tua reputazione. Nella proprietà src puntiamo a dove il browser può trovare l'asset del carattere. A seconda del browser, alcuni tipi di caratteri validi sono eot, ttf, otf, svg o un URI di dati che incorpora tutti i dati del carattere in linea.
| otf e ttf | svg | woff | eot | |
|---|---|---|---|---|
| IE | IE9 | IE9 | IE5 o versioni successive | |
| Firefox | FF3.5 | FF3.5 | FF3.6 | |
| Chrome | Chrome 4 | Chrome 0.3 | Chrome 5 | |
| Safari | 3.1 | 3.1 | ||
| Opera | Opera 10.00 | Opera 9 | ||
| iOS | iOS 1 | |||
| Android | 2,2 |
Naturalmente, niente è mai così semplice come dovrebbe essere. Il limite iniziale del codice sopra riportato era che non veniva inviato un EOT a IE 6-8. La sintassi @font-face a prova di proiettile ha proposto un modo per risolvere questo problema; segue una versione robusta.
@font-face {
font-family: 'Tagesschrift';
src: url('tagesschrift.eot'); /* IE 5-8 */
src: local('☺'), /* sneakily trick IE */
url('tagesschrift.woff') format('woff'), /* FF 3.6, Chrome 5, IE9 */
url('tagesschrift.ttf') format('truetype'), /* Opera, Safari */
url('tagesschrift.svg#font') format('svg'); /* iOS */
}
Stai già causando il mal di testa? Se preferisci iniziare rapidamente a utilizzare questo strumento, vai al generatore di Font Squirrel, uno strumento che semplifica l'intero processo per te, prendendo il carattere e preparandone le sue varianti e CSS. ma sono indispensabili per mettere in pratica i caratteri web oggi stesso.
Assistenza mobile?
Safari per dispositivi mobili supporta i caratteri web SVG a partire da iOS 3.1, mentre Android supporta otf/ttf a partire dalla versione 2.2. Ma gli utenti di dispositivi mobili dovrebbero ottenere questa migliore esperienza tipografica? Ti consiglio di no. Il motivo principale è il modo in cui WebKit gestisce il testo in attesa di un carattere personalizzato tramite @font-face: il testo è invisibile. Quindi, con una connessione mobile a bassa larghezza di banda, gli utenti non vedranno alcun testo fino al caricamento di circa 50.000 dati dei caratteri. Il team di Webkit sta cercando una soluzione per attivare un carattere di riserva dopo che sono scaduti alcuni secondi. Tuttavia, finché non sarà disponibile, non riterrei giusto sottoporre gli utenti a questi ostacoli tra loro e i tuoi contenuti.
Servizi caratteri web
Diversi servizi racchiudono la funzionalità @font-face in un'API semplice, spesso permettendoti di aggiungere un'unica riga di script o CSS al codice HTML e alcune configurazioni e hai finito. Molti tipi di caratteri, come WebInk, Typekit e Fontslive, ti permetteranno di utilizzare i caratteri (a volte fino a un limite di larghezza di banda) dietro pagamento di una tariffa mensile. L'utilizzo di questi servizi è molto conveniente per gli sviluppatori occasionali, lasciando alcune delle complicazioni legate alla pubblicazione di una soluzione cross-browser
L'API Google Font ti consente di utilizzare un piccolo insieme selezionato di caratteri concessi in licenza senza costi semplicemente collegandoti a un foglio di stile e lasciando che sia Google a gestire i problemi relativi a prestazioni e cross-browser. È il modo più veloce per decollare e correre con i caratteri web.
Ricerca di caratteri professionali per @font-face
Una sorpresa comune per i designer è che il semplice acquisto di una licenza per i caratteri (da utilizzare ad esempio nella progettazione grafica) non significa che tu possa utilizzarla in @font-face. Le licenze per @font-face (o per l'incorporamento web) sono in genere vendute separatamente. Leggi attentamente il contratto e, in caso di domande, non esitare a contattare la fonderia di font. Fontspring è una boutique di font che vende centinaia di caratteri professionali di qualità, tutti autorizzati per l'utilizzo con @font-face. FontFont e altre fonderie hanno iniziato a vendere direttamente le licenze @font-face, anche se al momento hanno come target solo WOFF e EOT, il che esclude una porzione considerevole (ma in calo) del mercato dei browser. Molte fonderie stanno aggiungendo licenze per i caratteri web al proprio catalogo, ma se non riesci a trovarne una per il tipo di carattere scelto, contattale per avere informazioni.
Gestire il FOUT
Il Flash di testo senza stile è un fenomeno di Firefox e Opera che piace a pochi web designer. Quando applichi un carattere personalizzato tramite @font-face, c'è un breve momento in cui, durante il caricamento della pagina, il carattere non è stato ancora scaricato e applicato e viene utilizzato il carattere successivo nello stack font-family. Questo causa il flashing di un carattere diverso (in genere meno bello), prima che venga eseguito l'upgrade.
Oltre all'API Google Font, c'è il WebFont Loader, una libreria JavaScript che mira a fornire una serie di hook di eventi per offrire un controllo elevato sul caricamento. Diamo un'occhiata a come puoi far sì che altri browser imitino il comportamento di WebKit di nascondere il testo di riserva durante il caricamento del carattere @font-face.
<script src="//ajax.googleapis.com/ajax/libs/webfont/1/webfont.js"></script>
<script>
WebFont.load({
custom: {
families: ['Tagesschrift'],
urls: ['http://paulirish.com/tagesschrift.css']
}
});
</script>
/* we want Tagesschrift to apply to all h2's */
.wf-loading h2 {
visibility: hidden;
}
.wf-active h2, .wf-inactive h2 {
visibility: visible;
font-family: 'Tagesschrift', 'Georgia', serif;
}
Se JavaScript è disattivato, il testo rimarrà visibile per tutto il tempo e, in caso di errori del font, ricorrerà in sicurezza a un serif di base. Per il momento considera questa soluzione una soluzione temporanea; la maggior parte degli esperti di font web desidera nascondere il testo di riserva per 2-5 secondi per poi rivelarlo. La larghezza di banda ridotta e i dispositivi mobili traggono grande vantaggio da questo timeout. Comprensibilmente, Mozilla sta cercando di risolvere il problema a breve.
Una soluzione più leggera ma meno efficace è la proprietà font-size-adjust, attualmente supportata solo in Firefox. Ti offre l'opportunità di normalizzare x-height in uno stack di caratteri, riducendo la quantità di modifiche visibili nella FOUT. Infatti, il generatore di Font Squirrel ha appena aggiunto una funzionalità in cui indica il rapporto di altezza x dei caratteri caricati, per consentirti di impostare con precisione il valore font-size-adjust.
Riepilogo
I caratteri web danno un po' di libertà ai designer e, grazie a funzionalità in arrivo come legature discrezionali e alternative stilistiche, avranno molta più flessibilità. Per ora, puoi tranquillamente implementare questa parte di CSS3 poiché copre il 98% dei browser di cui è stato eseguito il deployment. Buon divertimento!