{"id":784,"date":"2017-11-20T14:00:13","date_gmt":"2017-11-20T13:00:13","guid":{"rendered":"https:\/\/alistapart.com\/it\/article\/usare-i-webfont\/"},"modified":"2017-11-20T14:00:13","modified_gmt":"2017-11-20T13:00:13","slug":"usare-i-webfont","status":"publish","type":"article","link":"https:\/\/alistapart.com\/it\/article\/usare-i-webfont\/","title":{"rendered":"Usare i webfont"},"content":{"rendered":"
\n

Nota degli editori:<\/strong> Siamo lieti di condividere un estratto dal Chapter 2 (\u201cUsing Webfonts”) del nuovo libro di Bram Stein<\/a>, Webfont Handbook<\/cite><\/a>, disponibile adesso da A Book Apart<\/a>.<\/p>\n<\/div>\n

\n

Adesso che abbiamo selezionato un font, mettiamolo nel sito web. I webfont sono definiti in CSS con la regola @font-face<\/code>. Se siete web developer, molto probabilmente avrete scritto, copiato e incollato, o almeno visto una regola @font-face<\/code>. Tuttavia, per completezza, vediamone un esempio di base:<\/p>\n

Questo crea una nuova famiglia di webfont a cui si pu\u00f2 far riferimento con font-family<\/code> o con la propriet\u00e0 shorthand font<\/code>. Ma qui manca qualcosa. Quando si fa riferimento a un webfont in un font stack, dovete sempre essere sicuri di includere almeno un fallback font nel caso che il webfont non venga caricato. Qui, se Elena non viene caricato, il browser ripiegher\u00e0 sulla famiglia serif<\/code>:<\/p>\n

p <\/span>{<\/span>\n    font-family<\/span>:<\/span> Elena, serif;<\/span>\n}<\/span><\/code><\/pre>\n
Parleremo ancora dei fallback font e di come possano essere usati per far sembrare che il vostro sito si carichi pi\u00f9 velocemente nel Capitolo 3. Per ora, lasciamo che il nostro fallback stack sia semplice includendo solo famiglie di font serif<\/code> e sans-serif<\/code>.<\/p>\n<\/div>\n
\n
Font Family<\/h2>\n
Si crea una font family con pi\u00f9 stili creando una regola @font-face<\/code> per ogni stile e usando lo stesso nome di font-family<\/code>. Le seguenti regole @font-face<\/code> creano una famiglia con uno stile normal e uno bold:<\/p>\n
@font-face<\/span> {<\/span>\n    font-family<\/span>:<\/span> Elena;<\/span>\n    src<\/span>:<\/span> url(elena-regular.woff)<\/span>;<\/span>\n    font-weight<\/span>:<\/span> normal;<\/span>\n}<\/span>\n\n@font-face<\/span> {<\/span>\n    font-family<\/span>:<\/span> Elena;<\/span>\n    src<\/span>:<\/span> url(elena-bold.woff)<\/span>;<\/span>\n    font-weight<\/span>:<\/span> bold;<\/span>\n}<\/span><\/code><\/pre>\n
Potete usare questa font family nel vostro CSS facendo riferimento al nome della famiglia e al font-weight nei vostri selettori. Questo applica lo stile regular ai paragrafi e quello bold ai paragrafi strong<\/code>:<\/p>\n
p <\/span>{<\/span>\n    font-family<\/span>:<\/span> Elena, serif;<\/span>\n}<\/span>\n\np strong <\/span>{<\/span>\n    font-weight<\/span>:<\/span> bold;<\/span>\n}<\/span><\/code><\/pre>\n
\n\n\n\n\n\n
Internet Explorer 8<\/th>\nInternet Explorer 9-11<\/th>\nEdge<\/th>\nChrome<\/th>\nFirefox<\/th>\nSafari<\/th>\nOpera<\/th>\nAndroid System<\/th>\n<\/tr>\n<\/thead>\n
No<\/td>\nS\u00ec<\/td>\nS\u00ec<\/td>\nS\u00ec<\/td>\nS\u00ec<\/td>\nNo<\/td>\nS\u00ec<\/td>\nNo<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
Fig 2.1<\/strong>: Browser support per font-stretch nel momento in cui scrivo. (Controllate caniuse.com per l’attuale supporto dei browser per per il supporto specifico di ogni versione di un browser<\/a>.)<\/p>\n<\/div>\n
Con un po’ di fortuna, i restanti browser implementeranno presto la propriet\u00e0 font-stretch<\/code> e potrete usare tutte le 243 classificazioni del font.<\/p>\n<\/div>\n
\n
Formati del font<\/h2>\n
Il descrittore src<\/code> dice al browser dove trovare il font file. Gli esempi precedenti usavano un solo formato di font, ma spesso vedrete URL a formati di font multipli combinati a suggerimenti di formato, che vengono appesi dopo l’URL usando la sintassi format(\"value\")<\/code>. I format hint dicono al browser qual \u00e8 il formato del font file a un dato URL.<\/p>\n
@font-face<\/span> {<\/span>\n    font-family<\/span>:<\/span> Elena;<\/span>\n    src<\/span>:<\/span> url(elena-regular.woff2)<\/span> format(\"woff2\"<\/span>),\n        url(elena-regular.woff)<\/span> format(\"woff\"<\/span>);<\/span>\n}<\/span><\/code><\/pre>\n
Se elencate formati multipli, i browser moderni sceglieranno il primo formato che supportano basandosi sui format hint. Pertanto, \u00e8 importante elencare i formati del webfont ordinati dalla miglior compressione alla peggiore. Anche se i format hint sono opzionali, includeteli sempre: permettono al browser di conoscere il formato senza dover scaricare il font. Per esempio, se un browser non supporta WOFF2, ma supporta WOFF, pu\u00f2 saltare il font file WOFF2 basandosi sul format hint.<\/p>\n
\n\n\n\n\n\n\n\n\n\n\n\n
FORMATO<\/strong><\/td>\nWOFF2<\/strong><\/td>\nWOFF<\/strong><\/td>\nOpenType<\/strong><\/td>\nEOT<\/strong><\/td>\n<\/tr>\n
INTERNET EXPLORER 8<\/td>\nNo<\/td>\nNo<\/td>\nNo<\/td>\nSi<\/td>\n<\/tr>\n
INTERNET EXPLORER 9-11<\/td>\nNo<\/td>\nSi<\/td>\nSi<\/td>\nSi<\/td>\n<\/tr>\n
EDGE<\/td>\nSi<\/td>\nSi<\/td>\nSi<\/td>\nNo<\/td>\n<\/tr>\n
CHROME<\/td>\nSi<\/td>\nSi<\/td>\nSi<\/td>\nNo<\/td>\n<\/tr>\n
FIREFOX<\/td>\nSi<\/td>\nSi<\/td>\nSi<\/td>\nNo<\/td>\n<\/tr>\n
SAFARI<\/td>\nSi<\/td>\nSi<\/td>\nSi<\/td>\nNo<\/td>\n<\/tr>\n
OPERA<\/td>\nSi<\/td>\nSi<\/td>\nSi<\/td>\nNo<\/td>\n<\/tr>\n
ANDROID SYSTEM<\/td>\nNo<\/td>\nSi<\/td>\nSi<\/td>\nNo<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
Fig 2.2: Supporto dei browser per i formati di font nel momento in cui scrivo. Cercate delle versioni aggiornate e specifiche per browser per formato di font su caniuse.com<\/a>.<\/p>\n<\/div>\n
Nel cercare copertura per tutti i browser, potreste esservi imbattuti in qualcosa chiamato bulletproof @font-face<\/code> syntax<\/a> di Fontspring. La bulletproof syntax usa i font file EOT, WOFF2, WOFF, raw OpenType e SVG per coprire il maggior numero di browser:<\/p>\n
@font-face<\/span> {<\/span>\n    font-family<\/span>:<\/span> Elena;<\/span>\n    src<\/span>:<\/span> url(elena.eot?#iefix)<\/span> format(\"embedded-opentype\"<\/span>),\n         url(elena.woff2)<\/span> format(\"woff2\"<\/span>),\n         url(elena.woff)<\/span> format(\"woff\"<\/span>),\n         url(elena.otf)<\/span> format(\"opentype\"<\/span>),\n         url(elena.svg#elena)<\/span> format(\"svg\"<\/span>);<\/span>\n}<\/span><\/code><\/pre>\n
La prima riga dell’URL potrebbe sembrarvi un po’ strana. Le versioni di Internet Explorer 8 e precedenti non supportano la sintassi per formati di font multipli e trattano l’intero valore della propriet\u00e0 src<\/code> come URL. La bulletproof syntax inganna Internet Explorer 8 e precedenti facendogli credere che i restanti URL siano parte del fragment identifier del primo URL. Dal momento che i fragment identifier vengono ignorati quando si scaricano i files, Internet Explorer 8 e precedenti usano semplicemente il primo URL. I browser diversi da Internet Explorer salteranno tale riga perch\u00e9 non supportano EOT. Il resto delle entry sono quello che vi aspettate: formati di font elencati in ordine di preferenza.<\/p>\n
Ma la bulletproof syntax \u00e8 ancora rilevante? No. In effetti, penso che sia dannosa. I font SVG sono deprecati e supportati solo da browser che non sono pi\u00f9 in uso. La maggior parte dei siti web supporta Internet Explorer 9 e successivi, ciononostante la sintassi elenca EOT come primo formato di font preferito. Anche se Internet Explorer 9 e successivi supportano WOFF, queste versioni scaricano ancora il file EOT, semplicemente perch\u00e9 \u00e8 elencato per primo.<\/p>\n
Dal momento che la maggior parte dei siti web non supporta pi\u00f9 i vecchi browser, raccomando caldamente di usare una sintassi semplificata, che copre tutti i browser moderni, compresi quelli leggermente pi\u00f9 vecchi che sono ancora in uso, come Android 4.4 e precedenti:<\/p>\n
@font-face<\/span> {<\/span>\n    font-family<\/span>:<\/span> Elena;<\/span>\n    src<\/span>:<\/span> url(elena.woff2)<\/span> format(\"woff2\"<\/span>),\n         url(elena.woff)<\/span> format(\"woff\"<\/span>),\n         url(elena.otf)<\/span> format(\"opentype\"<\/span>);<\/span>\n}<\/span><\/code><\/pre>\n
Sebbene siano ancora in uso delle versioni pi\u00f9 vecchie di Android, l’uso mondiale di questi browser sta rapidamente diminuendo. Presto sarete probabilmente in grado di eliminare del tutto anche il formato raw OpenType e semplificare ulteriormente la sintassi:<\/p>\n
@font-face<\/span> {<\/span>\n    font-family<\/span>:<\/span> Elena;<\/span>\n    src<\/span>:<\/span> url(elena.woff2)<\/span> format(\"woff2\"<\/span>),\n         url(elena.woff)<\/span> format(\"woff\"<\/span>);<\/span>\n}<\/span><\/code><\/pre>\n
In questo caso, qualcuno che usa un browser pi\u00f9 vecchio vedr\u00e0 semplicemente i fallback font invece del webfont. Va bene: possono ancora leggere il contenuto con il fallback font. (Dar\u00f2 ulteriori dettagli sui fallback font pi\u00f9 tardi).<\/p>\n
C’\u00e8 un altro possibile valore per il descrittore src<\/code>. La funzione local<\/code> prende il nome di una font family locale. Se per caso il font \u00e8 installato sul sistema, il browser user\u00e0 quello, evitando cos\u00ec un download extra.<\/p>\n
@font-face<\/span> {<\/span>\n    font-family<\/span>:<\/span> Elena;<\/span>\n    src<\/span>:<\/span> local(\"Elena\"<\/span>),\n         url(elena-regular.woff2)<\/span> format(\"woff2\"<\/span>),\n         url(elena-regular.woff)<\/span> format(\"woff\"<\/span>);<\/span>\n}<\/span><\/code><\/pre>\n
Anche se questa pu\u00f2 sembrare una grande ottimizzazione, niente garantisce che il font locale si abbini al vostro webfont. Potreste ottenere una versione diversa del font, un font con un supporto diverso per le lingue o un font completamente diverso. Per questo motivo, solitamente raccomando di non usare la funzione local<\/code> a meno che non troviate accettabili questi svantaggi.<\/p>\n<\/div>\n
\n
Volete saperne di pi\u00f9?<\/h2>\n
Questo estratto da Webfont Handbook<\/cite> vi aiuta a cominciare. Ordinate l’intera versione<\/a> oggi, insieme ad altri eccellenti titoli da A Book Apart<\/a>.<\/p>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"
L’utilizzo dei webfont comincia con una semplice dichiarazione CSS, ma creare un font stack usabile e dei fallback non \u00e8 cos\u00ec semplice come sembra. Bram Stein ci spiega come avere successo in un esclusivo estratto dal Chapter 2 del suo nuovissimo Webfont Handbook, disponibile adesso da A Book Apart.<\/p>\n","protected":false},"author":818,"featured_media":7000827,"comment_status":"open","ping_status":"open","template":"","categories":[200,275],"tags":[],"coauthors":[518],"class_list":["post-784","article","type-article","status-publish","has-post-thumbnail","hentry","category-numero-222-6-ottobre-2017","category-tipografia-web-font"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/article\/784","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/article"}],"about":[{"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/types\/article"}],"author":[{"embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/users\/818"}],"replies":[{"embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/comments?post=784"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/media\/7000827"}],"wp:attachment":[{"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/media?parent=784"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/categories?post=784"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/tags?post=784"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/coauthors?post=784"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
I browser supportano svariati formati di webfont: OpenType (TrueType), EOT, WOFF e WOFF2. Alcuni browser supportano anche i font SVG, ma sono deprecati e non dovrebbero pi\u00f9 essere usati (e non dovrebbero essere confusi con il nuovo formato OpenType-SVG<\/a>). EOT, WOFF e WOFF2 non sono tecnicamente formati di font. Sono files OpenType compressi con vari gradi di compressione. WOFF2 offre la miglior compressione, seguito da WOFF e EOT (Fig 2.2<\/strong>).<\/p>\n
Oltre a font-weight<\/code>, @font-face<\/code> accetta anche i descrittori di propriet\u00e0 font-style<\/code> e font-stretch<\/code>, che definiscono gli stili quali italic e condensed. Tutti e tre i property descriptor possono essere usati per creare una singola font family con pi\u00f9 stili. In teoria, questo ci permette di creare una famiglia contenente 243 stili individuali (nove valori<\/a> di font-weight<\/code> \u00d7 tre valori<\/a> di font-style<\/code> \u00d7 nove valori<\/a> di font-stretch<\/code>). In pratica, tuttavia, siamo limitati a ventisette valori, dal momento che alcuni browser non supportano font-stretch<\/code> (Fig 2.1<\/strong>).<\/p>\n