Vrijeme je za još jedno uparivanje screencasta! Ovaj put imam Zacha Leathermana iz Filament Group. Zach je proveo puno istraživanja, pisanja i govora o učitavanju web fontova u posljednjih nekoliko godina. O tome ima sveobuhvatan vodič!
Postoje problemi sa zadanim načinom učitavanja prilagođenih fontova. Kao i u, samo povezivanje fonta u nekom CSS-u putem @ font-face. Čak i način na koji vam Google Fonts omogućuje upotrebu njihovih fontova, Zach naziva anti-pattern (u konačnici to je samo vanilija @ font-face). Različiti preglednici rade različite stvari s @ font-face. Na primjer, neke verzije Safarija čine postavljenu vrstu prilagođenog fonta nevidljivom dok se font ne učita, ali nema vremensko ograničenje, pa ako font iz bilo kojeg razloga ne uspije, mogli biste se naći u najgorem scenariju: zauvijek nevidljivi tekst na web mjestu.
Nemate puno kontrole nad učitavanjem fontova @ font-face, osim ako stvar ne preuzmete u svoje ruke. To znači stvari kao što su: umetanje fonta, podskup fonta (bilo s "kritičnim" skupom glifova, ili barem smanjivanje glifa u jezik koji se koristi), upotreba alata za učitavanje fonta da bi se utvrdilo kada se fontovi učitavaju i mijenjanje klasa da bi se one koristile . Taj zadnji je posebno zanimljiv. Kad vršite kontrolu nad učitavanjem fontova, ne morate se nositi samo s time kada / kako preglednik učitava CSS koji sadrži @ font-face, već i kada / kako preglednik nailazi na tekstualne elemente za koje je rečeno da koriste te fontove. Fontovi koji se ne koriste ne preuzimaju se. Stoga je ponekad postupak prisiljen na preuzimanje, pričekati da se preuzmu, a zatim primijeniti klase kako bi ih zapravo koristili.
Neki alati koje smo pogledali:
- Firefox DevTools bio je bolji za gledanje fontova koji se koriste
- Podskupovi fontova mogu se izvesti u generatoru fontova vjeverica ili u pripremi fontova.
- Koje glife podrazumijevaš? Testirajte što vam treba na određenim URL-ovima s Glyphhangerom.
- Kako prepoznati kada preglednik koristi faux bold / kurziv? faux-pas.