È ora di un altro screencast di accoppiamento! Questa volta ho Zach Leatherman, del Filament Group. Zach ha fatto molte ricerche, scritto e parlato del caricamento dei caratteri web negli ultimi anni. Ha una guida completa!
Ci sono alcuni problemi con il modo predefinito in cui vengono caricati i caratteri personalizzati. Come nel collegamento di un font in alcuni CSS tramite @ font-face. Anche il modo in cui Google Fonts ti offre di usare i loro caratteri Zach chiama un anti-pattern (alla fine è solo vanilla @ font-face). Browser diversi fanno cose diverse con @ font-face. Ad esempio, alcune versioni di Safari rendono il tipo impostato in un carattere personalizzato invisibile fino a quando il carattere non viene caricato, ma non ha timeout, quindi se il carattere non riesce per qualsiasi motivo, potresti trovarti nello scenario peggiore: testo per sempre invisibile su il sito.
Non hai molto controllo su come vengono caricati i caratteri @ font-face, a meno che tu non prenda in mano la situazione. Ciò significa cose come: integrare il carattere, sottoimpostare il carattere (o con un insieme "critico" di glifi, o almeno ridurre i glifi alla lingua in uso), usare caricatori di caratteri per determinare quando i caratteri vengono caricati e alterare le classi per usarli . Quest'ultimo è particolarmente interessante. Quando eserciti il controllo sul caricamento dei caratteri, non devi solo occuparti di quando / come il browser carica il CSS che contiene @ font-face, ma anche quando / come il browser incontra elementi di testo a cui viene detto di usare quei caratteri. I caratteri che non vengono utilizzati non vengono scaricati. Quindi a volte la procedura è forzarli a scaricare, attendere che vengano scaricati, quindi applicare le classi per utilizzarli effettivamente.
Alcuni strumenti che abbiamo esaminato:
- Firefox DevTools era migliore per guardare i caratteri in uso
- Il sottoinserimento dei caratteri può essere eseguito nel generatore di Font Squirrel o in Font Prep.
- Quali glifi sottoinsiemi? Verifica ciò di cui hai bisogno su determinati URL con Glyphhanger.
- Come fai a sapere quando il browser utilizza il finto grassetto / corsivo? passo falso.