Използването на шрифт е преобладаващо в повечето уеб страници и често включва грешки. Много от тези грешки оказват негативно влияние върху бюджета за уеб ефективност. Тази статия има за цел да предостави информация за използването на уеб шрифтове и да помогне за подобряване на ефективността ви в мрежата.
Както е показано в йерархията, прилагана при изобразяване на която и да е уеб страница, елементите на шрифта могат да забавят изобразяването на други елементи, докато не бъдат заредени. Правилното управление на това забавяне е важно както за кумулативното изместване на оформлението (CLS), така и за възприятието на потребителите.
Проблемът със зареждането на шрифта
Докато шрифтовете на страницата не бъдат заредени, видимостта на шрифтовете по време на процеса на изобразяване на HTML и CSS варира от браузър до браузър. Ето обобщение на начина, по който различните браузъри се справят с тази ситуация:
| Browser | Поведение по подразбиране, ако шрифтът не е готов... |
|---|---|
| Ръб | Използва системен шрифт, докато шрифтът не бъде готов. Разменя шрифта. |
| Chrome | Ще скрие текста за до 3 секунди. Ако текстът все още не е готов, използва системен шрифт, докато шрифтът не е готов. Разменя шрифта. |
| Firefox | Ще скрие текста за до 3 секунди. Ако текстът все още не е готов, използва системен шрифт, докато шрифтът не е готов. Разменя шрифта. |
| сафари | Скрива текста, докато шрифтът не е готов. |
За да разрешите този проблем, без да разчитате върху поведението на браузърабеше въведен параметърът font-display. В момента 92% от браузърите поддържат параметъра font-display.
Какво прави Font-Display?
По време на процеса на зареждане на страницата външният вид на шрифтовете може да варира, докато се заредят напълно, в зависимост от браузъра. Например, някои версии на браузъра Safari скриват текста, докато шрифтът не бъде зареден. The шрифт-дисплей: размяна CSS параметърът стандартизира това поведение, като показва текста, използвайки системен шрифт, докато файловете с шрифтове не бъдат заредени. След като шрифтовете се заредят, системният шрифт се заменя с желания шрифт. Ето примерна употреба:
@font-face {
font-family: 'Awesome Font';
font-style: normal;
font-weight: 400;
font-display: swap;
}Предварително зареждане на шрифтове
Използвайки за зареждане на шрифтове, преди критичният път за рендиране да предотврати пропуски, докато шрифтовете се зареждат.
БОНУС: Индустриален подход към използването на шрифтове
Според данните на SimilarTech, нека да разгледаме важна тенденция и моментна снимка на интернет света. Първата графика по-долу показва използването на шрифта на първите 10,000 100,000 страници, а втората графика показва използването на шрифтове на най-добрите XNUMX XNUMX сайта. Нека първо разгледаме тези графики:
Има 5% разлика в използването на Google Font и Font Awesome между най-добрите 10,000 100,000 сайта и най-добрите XNUMX XNUMX сайта. Това ни казва, че първите 10,000 XNUMX сайта са оптимизирали използването на шрифта. Препоръчваме да разгледате това като тема, която заслужава внимание. Помислете как можете да внедрите уеб шрифтове с вашите собствени решения.
БОНУС 2: Статистика за използване на Google Font и Font Awesome
Позовавайки се на първия бонус, предлагаме да разгледате двете графики, показващи числения обхват на най-използваните библиотеки с шрифтове. Броят на уникалните домейни тук надхвърля милиони, и тези милиони представляват вашите SEO конкуренти. Използването на тези библиотеки по-добре и по-оптимално от други може да ви помогне да се откроите.
Като следвате тези съвети и оптимизирате използването на вашия шрифт, можете значително да подобрите работата си в мрежата и потребителското изживяване.
