# 152: Nalaganje pisave z Zach Leatherman - CSS-triki

Anonim

Čas je za še eno seznanitev zaslona! Tokrat imam pri sebi Zacha Leathermana iz skupine Filament. Zach je v zadnjih nekaj letih veliko raziskoval, pisal in govoril o nalaganju spletnih pisav. Za to ima izčrpen vodnik!

Pri privzetem načinu nalaganja pisav po meri je nekaj težav. Tako kot pri samo povezovanju pisave v nekem CSS prek @ font-face. Tudi način, kako vam Google Fonts omogoča uporabo njihovih pisav, Zach imenuje anti-vzorec (navsezadnje gre le za vanilije @ font-face). Različni brskalniki z @ font-face počnejo različne stvari. Na primer, nekatere različice brskalnika Safari naredijo vrsto v pisavi po meri nevidno, dokler se pisava ne naloži, vendar nima časovne omejitve, tako da, če pisava iz kakršnega koli razloga ne uspe, ste lahko v najslabšem primeru: za vedno nevidno besedilo stran.

Nimate veliko nadzora nad nalaganjem pisav @ font-face, razen če stvari vzamete v svoje roke. To pomeni stvari, kot so: vstavljanje pisave, podnastavitev pisave (bodisi s »kritičnim« nizom glifov ali vsaj z zmanjšanjem glifov v jezik, ki se uporablja), uporaba nalagalcev pisav za določanje, kdaj se pisave naložijo, in spreminjanje razredov, ki jih uporabljajo . Ta zadnji je še posebej zanimiv. Ko izvajate nadzor nad nalaganjem pisave, se ne morate ukvarjati samo s tem, kdaj / kako brskalnik naloži CSS, ki vsebuje @ font-face, ampak tudi s tem, kdaj / kako brskalnik naleti na besedilne elemente, za katere je rečeno, da uporabljajo te pisave. Pisave, ki se ne uporabljajo, se ne prenesejo. Torej je včasih postopek prisiljen v prenos, počakajte, da se prenesejo, nato uporabite razrede, ki jih dejansko uporabljajo.

Nekaj ​​orodij, ki smo si jih ogledali:

  • Firefox DevTools je bil boljši za ogled pisav v uporabi
  • Podnastavitev pisav lahko izvedete v generatorju Font Squirrel ali v Pripravi pisave.
  • Katere glife si podmnožiš? Preizkusite, kaj potrebujete na določenih URL-jih z Glyphhangerjem.
  • Kako ugotovite, kdaj brskalnik uporablja ponarejeno krepko / ležeče? faux-pas.