På tide med nok en parring screencast! Denne gangen har jeg Zach Leatherman på, fra Filament Group. Zach har forsket mye, skrevet og snakket om innlasting av nettfont de siste årene. Han har en omfattende guide om det!
Det er noen problemer med standard måten som egendefinerte skrifter lastes på. Som i, bare å koble sammen en skrift i noen CSS gjennom @ font-face. Selv måten Google Fonts gir deg til å bruke skriftene deres, kaller Zach et antimønster (til slutt er det bare vanilje @ font-face). Ulike nettlesere gjør forskjellige ting med @ font-face. For eksempel gjør noen versjoner av Safari typen satt i en egendefinert font usynlig til fonten lastes inn, men har ingen tidsavbrudd, så hvis fonten mislykkes av en eller annen grunn, kan du være i det ultimate worst-case scenariet: evig usynlig tekst på siden.
Du har ikke så mye kontroll over hvordan @ font-face-skrifter lastes inn, med mindre du tar saken i egne hender. Det betyr ting som: å legge inn skrifttypen, legge inn fonten (enten med et "kritisk" sett med tegn, eller i det minste redusere tegn til språket i bruk), ved å bruke skriftlaster for å bestemme når skriftene skal lastes inn og endre klasser for å bruke dem . Den siste er spesielt interessant. Når du utøver kontroll over skriftinnlasting, trenger du ikke bare å håndtere når / hvordan nettleseren laster inn CSS som inneholder @ font-face, men også når / hvordan nettleseren kommer over tekstelementer som får beskjed om å bruke disse skriftene. Skrifter som ikke brukes blir ikke lastet ned. Så noen ganger er prosedyren å tvinge dem til å laste ned, vente på at de skal lastes ned, og deretter bruke klasser for å faktisk bruke dem.
Noen verktøy vi så på:
- Firefox DevTools var bedre for å se på skrifttyper i bruk
- Underinnstilling av skrifter kan gjøres i Font Squirrel-generatoren eller Font Prep.
- Hvilke tegn deler du? Test hva du trenger på bestemte nettadresser med Glyphhanger.
- Hvordan vet du når nettleseren bruker faux fet / kursiv? faux-pas.