Afișarea fontului - CSS-Tricks

De font-displaydefinește proprietatea modul în care sunt încărcate și afișate de browser - ul fișierele de fonturi. Se aplică @font-faceregulii care definește fonturile personalizate într-o foaie de stil.

@font-face ( font-family: 'MyWebFont'; /* Define the custom font name */ src: url('myfont.woff2') format('woff2'), url('myfont.woff') format('woff'); /* Define where the font can be downloaded */ font-display: fallback; /* Define how the browser behaves during download */ )

Valori

font-displayProprietatea acceptă cinci valori:

• auto(implicit): permite browserului să utilizeze metoda sa implicită pentru încărcare, care este cel mai adesea similară cu blockvaloarea.
• block: Instruiește browserul să ascundă scurt textul până când fontul se descarcă complet. Mai precis, browserul desenează textul cu un substituent invizibil, apoi îl schimbă cu fața personalizată a fontului imediat ce se încarcă. Acest lucru este, de asemenea, cunoscut sub numele de „flash de text invizibil” sau FOIT.
• swap: Instruiește browserul să utilizeze fontul alternativ pentru a afișa textul până când fontul personalizat a fost descărcat complet. Acest lucru este, de asemenea, cunoscut sub numele de „flash de text nestilizat” sau FOUT.
• fallback: Acționează ca un compromis între valori autoși swap. Browserul va ascunde textul timp de aproximativ 100 ms și, dacă fontul nu a fost încă descărcat, va folosi textul alternativ. Acesta va trece la noul font după ce a fost descărcat, dar numai într-o perioadă scurtă de schimb (probabil 3 secunde).
• optional: De exemplu fallback, această valoare îi spune browserului să ascundă inițial textul, apoi să treacă la un font alternativ până când fontul personalizat este disponibil pentru utilizare. Cu toate acestea, această valoare permite, de asemenea, browserului să determine dacă fontul personalizat este chiar utilizat deloc, utilizând viteza de conectare a utilizatorului ca factor determinant în care conexiunile mai lente au mai puține șanse să primească fontul personalizat.

Iată un alt mod de a te gândi la ele

	Perioada de blocare	Perioada swap
bloc	Mic de statura	Infinit
swap	Nici unul	Infinit
da înapoi	Extrem de scurt	Mic de statura
opțional	Extrem de scurt	Nici unul

De ce avem nevoie font-display

Înainte de a avea un sprijin larg pentru @font-face, arsenalul nostru tipografic era limitat la fonturile locale, unde singurele fonturi disponibile erau cele care erau preîncărcate pe computerul utilizatorului final. Numim aceste fonturi „sigure pentru web”, deoarece browserul nu trebuie să descarce nimic pentru ca acestea să poată fi redate.

Apoi a venit @font-faceregula care le-a dat designerilor web și dezvoltatorilor front-end noi puteri tipografice, spre deosebire de oricând. Ne-a permis să încărcăm fișiere de font pe un server și să scriem un set de reguli în foile noastre de stil care denumesc fontul și să spună browserului unde să descarce fișierele. De asemenea, a dat naștere la servicii precum Google Fonts care au adus fonturi personalizate maselor. În cele din urmă, un obstacol major care a separat designul web de designul tipărit a fost răsturnat!

Cu toate acestea, fonturile personalizate au venit (și continuă să vină) la un cost. Fișierele cu fonturi pot fi mari și timpul suplimentar pentru descărcarea fișierelor poate încetini performanța unui site, în special pentru dispozitivele cu o conexiune de rețea mai lentă. Costul suplimentar pentru utilizatori cu planuri de date limitate a devenit, de asemenea, un factor.

O altă preocupare specială care a apărut cu fonturile personalizate este ceea ce a fost supranumit „flash de text nestilat” sau FOUT pe scurt. Browserele ar afișa implicit un font de sistem în timp ce așteaptă descărcarea fontului personalizat. Acest lucru a permis paginilor web să se încarce mai repede, dar a ridicat îngrijorări în rândul designerilor de web care au văzut acest lucru ca deturnând experiența utilizatorului și denaturând designul dorit. Browserele web astăzi ascund, în general, textul până când este descărcat fontul personalizat, la care acum ne referim ca un „flash de text invizibil” sau FOIT.

Nici FOUT, nici FOIT nu sunt grozavi. Avem modalități de a optimiza performanța fonturilor personalizate pentru a ușura efectele. Cu toate acestea, acum trebuie font-displaysă îi spunem browserului dacă preferăm FOUT, FOIT sau chiar ceva între ele.

Testarea asistenței

Avertisment interesant remarcat de Šime Vidas:

Afișarea fontului CSS este un @font-facedescriptor și nu o proprietate, astfel încât suportul său în browser nu poate fi testat cu interogări de caracteristici ( @supportsregula CSS și CSS.supports API).

Mai multe informatii

• CSS Font Rendering Controls Module Level 1 Specification: O schiță a specificației pentru proprietate.
• font-display pentru mase: Jeremy Wagner ne-a prezentat proprietatea aici pe CSS-Tricks.
• Utilizare @font-face: o explicație cuprinzătoare a regulii și a celor mai bune practici pentru modul de utilizare.
• System Font Stack: un fragment pentru renunțarea totală la fonturi personalizate și se bazează exclusiv pe fonturile de sistem ale unui utilizator.
• Controlul performanței fontului cu font-display: O scriere fină pe Google de subiect.

Suport pentru browser

Aceste date de asistență pentru browser provin de la Caniuse, care are mai multe detalii. Un număr indică faptul că browserul acceptă funcția în versiunea respectivă și în sus.

Desktop

Crom	Firefox	IE	Margine	Safari
60	58	Nu	79	11.1

Mobil / Tabletă

Android Chrome	Android Firefox	Android	Safari iOS
88	85	81	11.3-11.4