O nouă modalitate de a reduce impactul încărcării fonturilor: descriptori de font CSS

Încărcarea fonturilor a fost de multă vreme o problemă a performanței web și chiar nu există alegeri bune aici. Dacă doriți să utilizați fonturi web, alegerile dvs. sunt, în principiu, Flash of Invisible Text (alias FOIT), unde textul este ascuns până când fontul se descarcă sau Flash of Unstyled Text (FOUT) unde utilizați inițial fontul sistemului alternativ și apoi îl actualizați la fontul web când se descarcă. Niciuna dintre opțiuni nu a „învins” cu adevărat, pentru că nici una nu este cu adevărat satisfăcătoare, să fiu sincer.

font-display nu trebuia să rezolve asta?

Proprietatea font-display pentru @font-face a oferit această alegere dezvoltatorului web, în ​​timp ce anterior browserul a decis că (IE și Edge au favorizat FOUT în trecut, în timp ce celelalte browsere au preferat FOIT). Cu toate acestea, dincolo de asta nu a rezolvat cu adevărat problema.

Un număr de site-uri s-au mutat la font-display: swap când a apărut pentru prima dată, iar Google Fonts chiar l-a făcut ca implicit în 2019. Gândirea aici a fost că era mai bine pentru performanță să afișeze textul cât de repede poți , chiar dacă este în fontul alternativ și apoi pentru a schimba fontul când se descarcă în sfârșit.

Și eu am susținut acest lucru pe atunci, dar mă trezesc din ce în ce mai frustrat de „efectul de hidratare” atunci când fonturile web se descarcă și caracterele se extind (sau se contractă) din cauza diferențelor dintre fonturi. Smashing Magazine, la fel ca majoritatea editorilor, folosește fonturi web, iar captura de ecran de mai jos arată diferența dintre randarea inițială (cu fonturile de rezervă) și randarea finală (cu fonturile web):

Acum, când sunt puse unul lângă altul, fonturile web sunt considerabil mai frumoase și se potrivesc cu marca Smashing Magazine. Dar vedem și că există o diferență destul de mare în aspectul textului cu cele două fonturi. Fonturile au dimensiuni foarte diferite și, din această cauză, conținutul ecranului se schimbă. În această epocă în care Core Web Vitals și Cumulative Layout Shifts sunt (pe bună dreptate!) recunoscute ca fiind dăunătoare pentru utilizatori, font-display: swap este o alegere proastă din această cauză.

Am revenit la font-display: block site-urile pe care le îngrijesc, deoarece mi se pare că schimbarea textului este destul de deranjantă și enervantă. Deși este adevărat că block nu va opri schimbarea (fontul este încă redat în text invizibil), cel puțin le face mai puțin vizibile pentru utilizator. De asemenea, am optimizat prin încărcarea fonturilor prin preîncărcarea fonturilor pe care le-am făcut cât mai mici posibil prin auto-găzduirea fonturilor subsetate - astfel încât vizitatorii au văzut adesea fonturile de rezervă doar pentru o perioadă scurtă de timp. Pentru mine, „perioada de blocare” a swap a fost prea scurtă și, sincer, aș prefera să aștept puțin mai mult pentru a obține randarea inițială corectă.

Folosind font-display: optional poate rezolva FOIT și FOUT — la un cost

Cealaltă opțiune este să utilizați font-display: optional . Această opțiune face ca fonturile web să fie opționale, sau altfel spus, dacă fontul nu este acolo în momentul în care pagina are nevoie de el, atunci depinde de browser să nu-l schimbe niciodată. Cu această opțiune, evităm atât FOIT, cât și FOUT folosind practic doar fonturi care au fost deja descărcate.

Dacă fontul web nu este disponibil atunci, revenim la fontul alternativ, dar următoarea navigare a paginii (sau o reîncărcare a acestei pagini) va folosi fontul - deoarece ar fi trebuit să se fi terminat descărcarea până atunci. Cu toate acestea, dacă fontul web este atât de neimportant pentru site, atunci ar putea fi o idee bună să-l eliminați complet - ceea ce este și mai bun pentru performanța web!

Primele impresii contează și a avea acea încărcare inițială fără fonturi web cu totul pare puțin prea mult. De asemenea, cred că, de altfel, fără absolut nicio dovadă care să susțină asta! — că le va oferi oamenilor impresia, poate în mod subconștient, că ceva este „în afara” la site și poate afecta modul în care oamenii folosesc site-ul.

Deci, toate opțiunile de fonturi au dezavantajele lor, inclusiv opțiunea de a nu folosi fonturi web deloc sau de a folosi fonturi de sistem (ceea ce este limitativ - dar poate nu atât de limitativ cum cred mulți!).

Faceți ca fontul dvs. de rezervă să se potrivească mai strâns cu fontul dvs

Sfântul Graal al încărcării fonturilor web a fost de a face fontul alternativ mai aproape de fontul web real pentru a reduce cât mai mult posibil schimbarea vizibilă, astfel încât utilizarea swap să aibă un impact mai mic. Deși nu vom putea niciodată să evităm schimburile cu totul, ne putem descurca mai bine decât în ​​captura de ecran de mai sus. Aplicația Font Style Matcher de Monica Dinculescu este adesea citată în articolele de încărcare a fonturilor și oferă o imagine fantastică a ceea ce ar trebui să fie posibil aici. Vă permite util să suprapuneți același text în două fonturi diferite pentru a vedea cât de diferite sunt acestea și să ajustați setările fontului pentru a le alinia mai strâns:

Din păcate, problema cu potrivirea stilului fontului este că nu putem pune aceste stiluri CSS să se aplice doar fonturilor alternative, așa că trebuie să folosim JavaScript și API-ul FontFace.load pentru a aplica (sau a anula) aceste diferențe de stil pe web. se încarcă fonturi .

Cantitatea de cod nu este uriașă, dar se simte totuși ca un pic mai mult efort decât ar trebui să fie. Deși există și alte avantaje și posibilități de a folosi API-ul JavaScript în acest scop, așa cum a explicat Zach Leatherman în această discuție fantastică din 2019 - puteți reduce refluxurile și puteți gestiona modul data-server și prefers-reduced-motion totuși (rețineți totuși că ambele au fost de atunci expuse la CSS de la acea discuție).

De asemenea, este mai dificil să gestionăm fonturile stocate în cache pe care le avem deja, ca să nu mai vorbim de diferențele dintre diferitele stiluri de rezervă. Aici, pe Smashing Magazine, încercăm o serie de alternative pentru a folosi cât mai bine fonturile de sistem pe care diferiți utilizatori și sisteme de operare le-au instalat:

 font-family: Mija,-apple-system,Arial,BlinkMacSystemFont,roboto slab,droid serif,segoe ui,Ubuntu,Cantarell,Georgia,serif;

A ști ce font este folosit sau a avea ajustări separate pentru fiecare și a te asigura că acestea sunt aplicate corect poate deveni rapid destul de complex.

Vine o soluție mai bună

Așadar, aceasta este o scurtă revenire a situației în care stau lucrurile începând de astăzi. Cu toate acestea, ceva fum începe să apară la orizont.

Încântat de descriptorul CSS „ajustare dimensiune” pentru fonturi: reduceți schimbările de aspect prin potrivirea unui font alternativ și a unui font web principal printr-un factor de scară pentru glife (procent).

Vezi https://t.co/mdRW2BMg6A de @cramforce pentru o demonstrație (Chrome Canary/FF Nightly cu steaguri) pic.twitter.com/hEg1HfUJlT

— Addy Osmani (@addyosmani) 22 mai 2021

După cum am menționat mai devreme, principala problemă cu aplicarea diferențelor de stil de rezervă a fost adăugarea și apoi eliminarea acestora. Ce se întâmplă dacă am putea spune browserului că aceste diferențe sunt doar pentru fonturile alternative?

Exact asta face un nou set de descriptori de fonturi propus ca parte a Modulului Fonturi CSS Nivelul 5. Acestea sunt aplicate declarațiilor @font-face unde este definit fontul individual.

Simon Hearne a scris despre această actualizare propusă a specificației pentru descriptori de font-face, care include patru descriptori noi: ascent-override , descent-override , line-gap-override și advance-override (de când au fost abandonate). Puteți juca cu terenul de joacă F-mods pe care Simon l-a creat pentru a vă încărca fonturile personalizate și alternative, apoi vă puteți juca cu modificările pentru a obține o potrivire perfectă.

După cum scrie Simon, combinația acestor patru descriptori ne-a permis să suprascriem aspectul fontului alternativ pentru a se potrivi cu fontul web, dar ei doar modifică cu adevărat spațierea și poziționarea verticală. Deci, pentru spațierea dintre caractere și litere, va trebui să furnizăm CSS suplimentar.

Dar lucrurile par să se schimbe din nou. Cel mai recent, advance-override a fost renunțată în favoarea viitorului descriptor size-adjust care ne permite să reducem schimbările de aspect prin potrivirea unui font alternativ și a unui font web principal printr-un factor de scară pentru glife (procent).

Cum functioneazã? Să presupunem că aveți următorul CSS:

 @font-face { font-family: 'Lato'; src: url('/static/fonts/Lato.woff2') format('woff2'); font-weight: 400; } h1 { font-family: Lato, Arial, sans-serif; }

Apoi, ceea ce ați face este să creați un @font-face pentru fontul alternativ Arial și să-i aplicați descriptori de ajustare. Atunci vei primi următorul fragment CSS:

 @font-face { font-family: 'Lato'; src: url('/static/fonts/Lato.woff2') format('woff2'); font-weight: 400; } @font-face { font-family: "Lato-fallback"; size-adjust: 97.38%; ascent-override: 99%; src: local("Arial"); } h1 { font-family: Lato, Lato-fallback, sans-serif; }

Aceasta înseamnă că, atunci când Lato-fallback este utilizat inițial (deoarece Arial este un font local și poate fi folosit imediat fără nicio descărcare suplimentară), atunci size-adjust ascent-override vă permit să vă apropiați mai mult de fontul Lato. Este o declarație suplimentară @font-face de scris, dar cu siguranță mult mai ușor decât cercuri prin care trebuia să sărim înainte!

În general, există patru descriptori principali @font-face incluși în această specificație: size-adjust , ascent-override , anularea descent-override line-gap-override alții fiind încă luați în considerare pentru indicele, superscriptul și alte cazuri de utilizare .

Malte Ubl a creat un instrument foarte util pentru a calcula automat aceste setări având în vedere două fonturi și un browser care acceptă aceste noi setări (mai multe despre asta într-un moment!). După cum subliniază Malte, computerele sunt bune la astfel de lucruri! În mod ideal, am putea expune, de asemenea, aceste setări pentru fonturile obișnuite dezvoltatorilor web, de exemplu, poate oferi aceste indicii în colecții de fonturi precum Google Fonts? Asta ar ajuta cu siguranță la creșterea adopției.

Acum, diferite sisteme de operare pot avea setări de font ușor diferite și obținerea exactă a acestora este practic o sarcină imposibilă, dar nu acesta este scopul. Scopul este de a reduce decalajul, astfel încât folosind font-display: swap nu mai este o experiență atât de tulburătoare, dar nu trebuie să mergem la extremele fonturilor optional sau fără fonturi web.

Când putem începe să folosim asta?

Trei dintre aceste setări au fost deja livrate în Chrome începând cu versiunea 87 , deși descriptorul size-adjust cheii nu este încă disponibil în niciun browser stabil. Cu toate acestea, Chrome Canary îl are, la fel ca și Firefox în spatele unui steag, așa că acesta nu este un concept abstract, îndepărtat, ci ceva care ar putea ateriza foarte curând.

În acest moment, specificațiile au tot felul de declinări și avertismente că nu este încă gata pentru timp real, dar cu siguranță se simte că ajunge acolo. Ca întotdeauna, există un echilibru între noi, designeri și dezvoltatori, testându-l și oferind feedback și descurajând utilizarea acestuia, astfel încât implementarea să nu se blocheze deoarece prea mulți oameni ajung să folosească o versiune anterioară.

Chrome și-a declarat intenția de a face disponibilă size-adjust în Chrome 92, care urmează să fie lansată pe 20 iulie, indicând probabil că este aproape acolo.

Deci, nu este încă gata, dar se pare că va veni în viitorul foarte apropiat. Între timp, jucați-vă cu demo-ul în Chrome Canary și vedeți dacă se poate apropia puțin de a rezolva problemele de încărcare a fonturilor și de impactul CLS pe ​​care îl provoacă.