Che cos'è esattamente un carattere web e cosa comporta la conversione in uno?

Ho letto alcuni articoli su questo, ma le effettive differenze tecniche tra i caratteri web e quelli desktop mi sfuggono ancora. Più leggo sull'argomento, più ho la sensazione che nessuno abbia una chiara definizione tecnica di cosa sia esattamente un webfont.

Quando carico un carattere "desktop" su un servizio che genera webfont come FontSquirrel, cosa fanno esattamente questi servizi nel file del carattere per renderlo un carattere web? Se l'uso principale di questi servizi è la conversione in diversi formati, quali formati sono effettivamente necessari sul Web moderno per supportare un numero ragionevole di browser a partire dal 2019?

Un "font web" è solo un font utilizzato sul web o sul browser. Quello che fanno questi generatori di font web è solo semplificarti la vita dandoti i css necessari per servire il font ai tuoi visitatori e convertirlo in tutti i formati di file necessari per assicurarti che il font funzioni su più browser.

Alcuni caratteri sono considerati "sicuri per il web" semplicemente essendo così comuni che ogni computer li possiede, come "Arial". Non devi fare altro che dire al sito Web di utilizzare quel carattere. I caratteri Web devono essere scaricati dal browser del visitatore perché se un carattere non è sul tuo computer, non lo vedrai.

I formati di caratteri sviluppati appositamente per il Web, come Woff, sono progettati pensando a dimensioni ridotte. I font di Google ti offrono anche diversi formati in questo modo, è solo un po 'nascosto.

È abbastanza importante notare che alcuni caratteri potrebbero avere una licenza per caratteri web separata, che potresti non avere anche se possiedi i file dei caratteri. Proprio come le immagini di Google ... Solo perché sei stato in grado di scaricare l'immagine, non significa che puoi usarlo per vendere il dopobarba della tua azienda.

Developers.google.com ha un buon post che si concentra sull'ottimizzazione dei caratteri web ma ha anche qualcosa sulle basi.

C'è un estratto abbastanza buono dei diversi formati in quell'articolo:

Oggi ci sono quattro formati di container di caratteri in uso sul web: EOT, TTF, WOFF e WOFF2. Sfortunatamente, nonostante l'ampia gamma di scelte, non esiste un unico formato universale che funzioni su tutti i browser vecchi e nuovi: EOT è solo IE, TTF ha supporto IE parziale, WOFF gode del supporto più ampio ma non è disponibile in alcuni browser meno recenti e il supporto per WOFF 2.0 è un work in progress per molti browser.

Quindi, dove ci lascia? Non esiste un unico formato che funzioni in tutti i browser, il che significa che dobbiamo fornire più formati per fornire un'esperienza coerente

Transfonter ha anche una tabella abbastanza buona sul supporto del browser:

Ho fatto qualche ricerca più dettagliata dopo aver fatto questa domanda, e quindi sto aggiungendo questa risposta come una sorta di addendum a quella di Joonas, il che era buono ma non ha risposto alla mia ultima domanda in modo sufficientemente dettagliato per me:

Se l'uso principale di questi servizi è la conversione in diversi formati, quali formati sono effettivamente necessari sul Web moderno per supportare un numero ragionevole di browser a partire dal 2019?

Molti sviluppatori sostengono che WOFF e WOFF2 sono gli unici formati di caratteri necessari nello sviluppo web moderno . Tuttavia, quelle risposte non sono di buona provenienza e penso anche che siano leggermente troppo zelanti, quindi iniziamo guardando le cifre di supporto effettive per WOFF e WOFF2, per gentile concessione di CanIUse.com, che è lo standard del settore per documentare questo genere di cose.

Supporto per WOFF2

WOFF2 migliora su WOFF in ogni modo, è supportato dalla maggior parte dei browser desktop rilasciati dopo il 2014, ma solo dal 2018 ha iniziato a essere supportato dalla maggior parte dei browser mobili. È supportato da circa il 93% dei browser a livello globale.

Supporto per WOFF

WOFF ha iniziato a essere supportato da Internet Explorer in IE9 (rilasciato nel 2011), il che rende il formato EOT obsoleto per le versioni di IE rilasciate dal 2011. È supportato da circa il 97% dei browser a livello globale.

Altri browser desktop hanno iniziato a supportare WOFF all'incirca nello stesso momento, incluso Firefox da Firefox 3.6, Chrome da Chrome 5 e Safari da 5.1 (rilasciati rispettivamente nel 2010, 2011 e 2011), rendendo obsoleti i formati TTF e OTF ¹ nelle versioni precedenti . La maggior parte dei browser per dispositivi mobili supporta WOFF dal 2013.

Avvertenze e conclusioni

Da questo punto di vista, è abbastanza facile cancellare tutti gli altri formati come non necessari, ma il software non ufficialmente supportato non è mai stato un buon indicatore del fatto che non viene più utilizzato. Per dirla in altro modo, la condivisione della versione del browser globale non è affatto rappresentativa dei dati demografici utilizzati dal tuo sito Web.

La condivisione della versione del browser può variare notevolmente tra i dati demografici: fattori come paese, classe sociale e reddito influenzano fortemente i dispositivi (e quindi le versioni dei browser) utilizzati dagli utenti. Come sviluppatore, pensa se il sito che stai costruendo verrà utilizzato dai dati demografici che hanno maggiori probabilità di utilizzare quelle versioni precedenti.

Se decidi che è così e devi supportare i browser desktop precedenti al 2011 o i browser mobili precedenti al 2013, utilizza lo stack completo di caratteri: WOFF2, WOFF, TTF (o OTF) ed EOT.

Se non hai bisogno di supportare quegli antichi browser, ed è ancora vero che molto probabilmente non lo fai, usa semplicemente WOFF2 e WOFF come stack di font da qui in poi.

_{(1) TTF e OTF sono formati di font desktop tradizionali e qualsiasi browser che supporti uno supporta l'altro, quindi non utilizzare mai entrambi}

Non tanto.

WOFF non è altro che un formato compresso per TTF, con dimensioni più ridotte. Gli interni non cambiano. WOFF2 va un po 'oltre, modifica leggermente la rappresentazione dei caratteri per aumentare la compressione. EOT, essendo un formato solo per MS, non conta affatto. SVG è praticamente solo contorni, poco più, quindi non conta come un carattere reale, usalo solo per le icone, se non del tutto.

Basta usare WOFF e finirlo. Se vuoi spremere l'ultimo byte, potresti voler offrire anche WOFF2 ma la differenza sarà trascurabile.

Vorrei sottolineare qualcosa di veramente basilare, però: un "webfont", a parte i dettagli tecnici dell'implementazione, è un font che è stato concesso in licenza dal suo creatore o da un detentore dei diritti per il compito specifico di utilizzare su un sito Web. E quelli arriveranno in un formato webfont. Se sei seduto di fronte a un generatore per convertire un carattere in un formato webfont e non è open-source o uno che hai disegnato, fermati proprio lì! Stai quasi certamente rompendo la licenza e potresti essere citato in giudizio. E dal momento che è sul web, è facile per le persone trovare quello che stai facendo e controllare il loro elenco di vendite.

Vedi ad esempio questo doofus , che ha lavorato per Facebook e Google, che non se ne è reso conto fino a quando qualcuno non gli ha detto che stava tecnicamente usando un carattere piratato sul suo sito web. Aveva una licenza di abbonamento desktop, ma questa non è una licenza per l'uso sul web.