Tid til endnu en parring screencast! Denne gang har jeg Zach Leatherman fra Filament Group. Zach har gjort en masse research, skrivning og tale om web font indlæsning de sidste par år. Han har en omfattende guide til det!
Der er nogle problemer med standardmåden, hvor brugerdefinerede skrifttyper indlæses. Som i, bare at forbinde en skrifttype i nogle CSS gennem @ font-face. Selv den måde, hvorpå Google Fonts giver dig mulighed for at bruge deres skrifttyper, kalder Zach et antimønster (i sidste ende er det bare vanille @ font-face). Forskellige browsere gør forskellige ting med @ font-face. For eksempel gør nogle versioner af Safari typen indstillet i en brugerdefineret skrifttype usynlig, indtil skrifttypen indlæses, men har ingen timeout, så hvis skrifttypen mislykkes af en eller anden grund, kan du være i det ultimative worst-case scenario: evigt usynlig tekst på siden.
Du har ikke en masse kontrol over, hvordan @ font-face skrifttyper indlæses, medmindre du tager sagen i dine egne hænder. Det betyder ting som: indlejring af skrifttypen, underindstilling af skrifttypen (enten med et "kritisk" sæt glyfer eller i det mindste at reducere tegn til det sprog, der er brugt), ved hjælp af fontindlæsere til at bestemme, hvornår skrifttyperne indlæses og ændre klasser for at bruge dem . Den sidste er særlig interessant. Når du udøver kontrol over fontindlæsning, skal du ikke kun beskæftige dig med, hvornår / hvordan browseren indlæser CSS, der indeholder @ font-face, men også når / hvordan browseren støder på tekstelementer, der får besked på at bruge disse skrifttyper. Skrifttyper, der ikke bruges, downloades ikke. Så nogle gange er proceduren at tvinge dem til at downloade, vente på at de downloades og derefter anvende klasser for faktisk at bruge dem.
Nogle værktøjer, vi så på:
- Firefox DevTools var bedre til at se på skrifttyper i brug
- Underindstilling af skrifttyper kan udføres i Font Squirrel-generatoren eller Font Prep.
- Hvilke tegn sætter du ind? Test hvad du har brug for på bestemte webadresser med Glyphhanger.
- Hvordan fortæller du, hvornår browseren bruger faux fed / kursiv? faux-pas.