Aika uudelle pariliitoksen kuvaruudulle! Tällä kertaa minulla on Zach Leatherman Filament Groupista. Zach on tehnyt paljon tutkimuksia, kirjoittanut ja puhunut verkkofonttien lataamisesta viime vuosina. Hänellä on siitä kattava opas!
Mukautettujen kirjasinten oletuslataustavassa on joitain ongelmia. Kuten vuonna, vain linkittämällä kirjasin joihinkin CSS: ään @ font-face -palvelun kautta. Jopa tapa, jolla Google Fonts antaa sinun käyttää kirjasimiaan, Zach kutsuu anti-mallia (viime kädessä se on vain vanilla @ font-face). Eri selaimet tekevät erilaisia asioita @ font-face. Esimerkiksi jotkin Safarin versiot tekevät mukautetussa kirjasimessa asetetun tyypin näkymättömäksi, kunnes fontti latautuu, mutta sillä ei ole aikakatkaisua, joten jos kirjasin epäonnistuu jostain syystä, saatat olla äärimmäisessä tilanteessa: ikuisesti näkymätön teksti sivu.
Sinulla ei ole mitään hallintaa siitä, kuinka @ font-face -fontit latautuvat, ellet ota asioita omiin käsiisi. Tämä tarkoittaa seuraavia asioita: fontin viivaaminen, fontin osajoukko (joko "kriittisellä" glyfijoukolla tai ainakin pelkistämällä kuviot käytetylle kielelle), fonttien latauslaitteiden käyttäminen sen määrittämiseksi, milloin fontit latautuvat, ja luokkien muuttaminen niiden käyttämiseksi . Tämä viimeinen on erityisen mielenkiintoinen. Kun hallinnoit kirjasimen lataamista, sinun ei tarvitse pelkästään selvittää, milloin / miten selain lataa CS-fontin, joka sisältää @ font-face, vaan myös sen, milloin / miten selain törmää tekstielementteihin, joiden käsketään käyttämään kyseisiä kirjasimia. Fontteja, joita ei käytetä, ei ladata. Joten joskus menettely on pakottaa heidät lataamaan, odottamaan niiden lataamista ja sitten käyttämään luokkia tosiasiallisesti käyttämään niitä.
Joitakin tarkastelemiamme työkaluja:
- Firefox DevTools oli parempi tarkastella käytössä olevia fontteja
- Fonttien jakaminen voidaan tehdä Font Squirrel -generaattorissa tai Font Prep -ohjelmassa.
- Mitä kuvioita asetat alaryhmään? Testaa tarvitsemasi tietyissä URL-osoitteissa Glyphhangerilla.
- Kuinka tiedät, kun selain käyttää faux lihavoitua / kursivoitua? etikettivirhe.