de Mattia Astorino

Fonturile web personalizate sunt utilizate peste tot în lume, dar multe (atât de multe) site-uri le încarcă necorespunzător. Acest lucru cauzează o mulțime de probleme la încărcarea paginilor, cum ar fi probleme de performanță, timpul de încărcare lent, redarea blocată și fonturile schimbate în timpul navigării.

Văd mulți dezvoltatori ignorând aceste probleme sau, probabil, făcând aceleași erori din nou și din nou doar pentru că „au făcut întotdeauna acest lucru”, dar în calitate de dezvoltatori web trebuie să ne putem adapta într-un mediu în continuă schimbare.

Este timpul să întrerupeți această buclă și să începeți să faceți ceea ce trebuie în 2019. Există doar patru pași de luat în considerare atunci când încărcați un font web personalizat:

  • Folosiți formatul corect al fontului
  • Preîncărcați fonturile
  • Folosiți declarația corectă font-face
  • Evitați textul invizibil în timpul încărcării fontului.

Să descompunem aceste puncte pe rând.

Folosiți formatul corect al fontului

Există multe formate de fonturi care pot fi utilizate pe web, dar sunt necesare doar două formate dacă nu trebuie să acceptați Internet Explorer (IE) 8 sau o versiune mai mică: woff și woff2. Acestea sunt singurele două tipuri de fișiere pe care ar trebui să le utilizați, deoarece sunt comprimate în format gzip în mod implicit (deci sunt foarte mici), sunt optimizate pentru web și sunt pe deplin acceptate de IE 9+ și de toate celelalte browsere evergreen.

Preîncărcați fonturile

Atunci când utilizați fonturi personalizate, ar trebui să spuneți browserului să le preîncărce folosind corespunzător rel="" etichetă și atribute:

<link rel="preload" as="font" href="https://www.freecodecamp.org/fonts/custom-font.woff2" type="font/woff2" crossorigin="anonymous">
<link rel="preload" as="font" href="https://www.freecodecamp.org/fonts/custom-font.woff" type="font/woff2" crossorigin="anonymous">

Rețineți că utilizarea crossoriginului aici este important; fără acest atribut, fontul preîncărcat este ignorat de browser și are loc o nouă preluare. Acest lucru se datorează faptului că se așteaptă ca fonturile să fie preluate în mod anonim de browser, iar solicitarea de preîncărcare este făcută anonimă doar utilizând atributul this

În exemplul de mai sus, rel="preload" as="font" atributele vor cere browserului să înceapă să descarce fișierul necesar resursa cât mai curând posibil. De asemenea, ei spun browserului că acesta este un font, astfel încât să îl poată acorda prioritate în coada de resurse. Folosind indicii de preîncărcare va avea un impact dramatic asupra performanței fontului web și a încărcării inițiale a paginii. Browserele care acceptă indicii de preîncărcare și preluare vor începe să descarce fonturi web de îndată ce au văzut indiciu în fișierul HTML și nu mai trebuie să aștepte CSS.

Puteți folosi în schimb rel="prefetch" atribut pentru a spune browserului să pregătească descărcarea resurselor care ar putea fi necesare ulterior în timpul încărcării paginii sau a acțiunilor utilizatorului, astfel încât să acorde o prioritate redusă resurselor respective.

PRUDENȚĂ:
Dacă utilizați un CDN precum Google Fonts, asigurați-vă că fișierele de fonturi pe care le încărcați se potrivesc cu cele din CSS. Fonturile pot fi, de asemenea, actualizate în mod regulat și, dacă preîncărcați o versiune veche în timp ce utilizați CSS pentru o versiune mai nouă, puteți ajunge să descărcați două versiuni ale aceluiași font și să pierdeți lățimea de bandă a utilizatorilor. Luați în considerare utilizarea <link rel="preconnect “>?? ‍? în schimb pentru o întreținere mai ușoară.

Declarație corectă față-font

Declararea unei familii tip font este foarte simplă, dar trebuie să avem grijă de anumite lucruri atunci când o facem. Iată un exemplu corect care declară o familie de fonturi personalizate:

@font-face {  font-family: 'Custom Font';  font-weight: 400;  font-style: normal;  font-display: swap; /* Read next point */  unicode-range: U+000-5FF; /* Download only latin glyphs */  src: local('Custom Font'),       url("https://www.freecodecamp.org/fonts/custom-font.woff2") format('woff2'),        url("https://www.freecodecamp.org/fonts/custom-font.woff") format('woff');}

Iată gama Unicode Fundamentele web Google.

După cum puteți vedea, folosim numai fonturi optimizate (woff și woff2) și îi spunem browserului să sarcină numai glifele necesare variază (de la U+000 la U+5FF), dar această proprietate nu împiedică browserele să descarce întregul font. Există, de asemenea, încă două lucruri de remarcat, local() funcția și ordinea declarării fontului.

local() funcția permite utilizatorilor să folosească copia locală a fontului dacă este prezentă (de exemplu, gândiți-vă la fonturile Roboto care sunt preinstalate pe Android) în loc să o descarce.

Comanda de declarare a fontului este, de asemenea, importantă, deoarece browserul va începe să preia resursele urmând ordinea de declarație. Dacă acceptă formatul woff2, va descărca fontul sau dacă nu recunoaște formatul resursei, va trece la următorul și așa mai departe.

Dacă vrei cu adevărat să folosești eot și ttf fonturile asigurați-vă că le adăugați la sfârșitul fișierului src declaraţie.

Resurse

Evitați textul invizibil în timpul încărcării fontului

Fonturile sunt adesea fișiere mari, care necesită o perioadă de timp pentru a se încărca chiar și atunci când sunt gzip. Pentru a face față acestui lucru, unele browsere ascund text până când se încarcă fontul („flash-ul textului invizibil”). Puteți evita „blițul” și puteți arăta conținut utilizatorilor imediat folosind inițial un font de sistem, apoi înlocuiți-l.

În anteriorul @font-face exemplu veți observa font-displaydeclaraţie. swap value îi spune browserului că textul care utilizează acest font ar trebui să fie afișat imediat folosind un font de sistem. Odată ce fontul personalizat este gata, fontul de sistem este schimbat.

În cazul în care un browserul nu acceptă font-display continuă să își urmeze comportamentul implicit pentru încărcarea fonturilor.

Comportamentele implicite ale browserului dacă un font nu este gata:

Margine utilizează un font de sistem până când fontul personalizat este gata, apoi schimbă fonturile.

Crom va ascunde textul timp de până la 3 secunde. Dacă textul încă nu este gata, va utiliza un font de sistem până când fontul personalizat este gata.

Firefox va ascunde textul timp de până la 3 secunde. Dacă textul încă nu este gata, va utiliza un font de sistem până când fontul personalizat este gata.

Safari ascunde textul până când fontul personalizat este gata.

Testarea

Următoarele linkuri testează „versiunea standard” față de cea optimizată:

Rezultate

Cum se incarca fonturile web pentru a evita problemele de
Mod implicit
1611933846 793 Cum se incarca fonturile web pentru a evita problemele de
Comportament optimizat

Concluzie

Luând în considerare astfel de optimizări de bază, veți îmbunătăți UX-ul general al produsului dvs. digital. Trebuie să luăm în considerare situațiile în care viteza conexiunii nu este optimă sau când oamenii nu au timp să aștepte câteva secunde în timp ce aplicația / site-ul dvs. este complet încărcat și navigabil.

Astfel de îmbunătățiri, în special pentru proiectele mari, sunt obligatorii pentru îmbunătățirea experienței generale a utilizatorului și chiar nu necesită mult efort.

Trebuie să lucrăm împreună în încercând să repar internetul.

Urmăriți blogul meu la:

Mattia Astorino
Dezvoltator web, ninja CSS / HTML în Monza. Membru Open Source Design.equinsuocha.io