Време е за поредното сдвояване на екрана Този път имам Zach Leatherman, от Filament Group. През последните няколко години Зак направи много изследвания, писане и говорене за зареждане на уеб шрифтове. Той има изчерпателно ръководство за това!
Има някои проблеми с начина, по който по подразбиране се зареждат персонализирани шрифтове. Както в, просто свързване на шрифт в някакъв CSS чрез @ font-face. Дори начина, по който Google Fonts ви предоставя да използвате техните шрифтове, Zach нарича анти-шаблон (в крайна сметка това е просто ванилия @ font-face). Различните браузъри правят различни неща с @ font-face. Например, някои версии на Safari правят зададения тип в персонализиран шрифт невидим, докато шрифтът се зареди, но няма изчакване, така че ако шрифтът се провали по някаква причина, може да сте в най-лошия сценарий: завинаги невидим текст на сайта.
Нямате много контрол над това как се зареждат шрифтовете @ font-face, освен ако не вземете нещата в свои ръце. Това означава неща като: вграждане на шрифта, подгрупиране на шрифта (или с „критичен“ набор от глифи, или поне намаляване на глифите към използвания език), използване на зареждащи шрифтове, за да се определи кога шрифтовете се зареждат и променящи класове, за да ги използват . Последният е особено интересен. Когато упражнявате контрол върху зареждането на шрифта, не само трябва да се справяте с това кога / как браузърът зарежда CSS, който съдържа @ font-face, но и кога / как браузърът попада на текстови елементи, на които е казано да използват тези шрифтове. Неизползваните шрифтове не се изтеглят. Така че понякога процедурата е да ги принудите да изтеглят, да изчакате да ги изтеглят, след което да приложите класове, за да ги използвате.
Някои инструменти, които разгледахме:
- Firefox DevTools беше по-добре да разгледа използваните шрифтове
- Поднастройката на шрифтовете може да се извърши в генератора Font Squirrel или Font Prep.
- Какви глифове подгрупирате? Тествайте това, от което се нуждаете, на определени URL адреси с Glyphhanger.
- Как да разберете кога браузърът използва фалшив получер / курсив? гаф.