Dags för en ny parning screencast! Den här gången har jag Zach Leatherman på, från Filament Group. Zach har gjort mycket forskning, skrivit och talat om webbteckensnittsläsning de senaste åren. Han har en omfattande guide om det!
Det finns några problem med standardmetoden som anpassade teckensnitt laddas. Som i, bara länka ett teckensnitt i vissa CSS genom @ font-face. Till och med hur Google-teckensnitt ger dig att använda deras teckensnitt kallar Zach ett antimönster (i slutändan är det bara vanilj @ font-face). Olika webbläsare gör olika saker med @ font-face. Till exempel gör vissa versioner av Safari typ inställd i ett anpassat teckensnitt osynligt tills teckensnittet laddas, men har ingen timeout, så om teckensnittet misslyckas av någon anledning kan du vara i det yttersta värsta fallet: för alltid osynlig text platsen.
Du har inte en hel del kontroll över hur @ font-face-teckensnitt laddas, såvida du inte tar saken i egna händer. Det betyder saker som: att infoga teckensnittet, lägga in teckensnittet (antingen med en "kritisk" uppsättning tecken eller åtminstone minska siffrorna till språket som används), använda teckensnittsläsare för att avgöra när teckensnitten laddas och ändra klasser för att använda dem . Den sista är särskilt intressant. När du utövar kontroll över teckensnittsläsning behöver du inte bara ta itu med när / hur webbläsaren laddar CSS som innehåller @ font-face, utan också när / hur webbläsaren stöter på textelement som får veta att de ska använda dessa teckensnitt. Teckensnitt som inte används laddas inte ner. Så ibland är proceduren att tvinga dem att ladda ner, vänta tills de laddas ner och sedan använda klasser för att faktiskt använda dem.
Några verktyg vi tittade på:
- Firefox DevTools var bättre för att titta på teckensnitt som används
- Delning av teckensnitt kan göras i Font Squirrel-generatorn eller Font Prep.
- Vilka siffror delar du in? Testa vad du behöver på vissa webbadresser med Glyphhanger.
- Hur vet du när webbläsaren använder faux fet / kursiv? faux-pas.