Aeg uueks sidumisekraaniks! Seekord on mul peal Zach Leatherman filamentide grupist. Zach on viimastel aastatel palju uurinud, kirjutanud ja rääkinud veebifondide laadimisest. Tal on selle kohta põhjalik juhend!
Kohandatud fontide laadimise vaikeviisiga on probleeme. Nagu ka, lihtsalt linkige mõnes CSS-is font @ font-face kaudu. Isegi see, kuidas Google Fonts pakub teile nende fonte kasutada, kutsub Zach mustrivastast mustrit (lõppkokkuvõttes on see lihtsalt vanilla @ font-face). Erinevad brauserid teevad @ font-face abil erinevaid asju. Näiteks muudavad mõned Safari versioonid kohandatud fondis määratud tüübi nähtamatuks, kuni font laaditakse, kuid sellel ei ole ajalõppu, nii et kui font mingil põhjusel ebaõnnestub, võite olla kõige hullemas olukorras: igavesti nähtamatu tekst sisse saidile.
@ Font-face fontide laadimise üle pole teil paganama palju kontrolli, kui te ei võta asja enda kätte. See tähendab selliseid asju nagu fondi joondamine, fondi alamhäälestamine (kas „kriitilise” glüüfikomplektiga või vähemalt glüüfide vähendamine kasutatavaks keeleks), fondilaadijate kasutamine fondide laadimise määramiseks ja klasside muutmine nende kasutamiseks . See viimane on eriti huvitav. Fondi laadimise üle kontrolli teostamisel ei pea te tegelema mitte ainult sellega, millal / kuidas brauser laadib @ font-face'i sisaldava CSS-i, vaid ka sellega, millal / kuidas brauser satub tekstielementidesse, millel on käsk neid fonte kasutada. Fondid, mida ei kasutata, ei laadita alla. Nii et mõnikord on protseduur sunnitud neid alla laadima, ootama allalaadimist ja seejärel rakendama klasse nende reaalseks kasutamiseks.
Mõned tööriistad, mida me vaatasime:
- Firefox DevTools oli parem kasutatavate fontide vaatamiseks
- Fondide tellimist saab teha Font Orava generaatoris või Font Prepis.
- Milliseid tähestikke te alamhulka määrate? Testi, mida vajate, Glyphhangeriga teatud URL-idel.
- Kuidas teada saada, kui brauser kasutab faux boldi / kaldkirja? faux-pas.