Problemă cu regula @ font-face
Simplă și directă, dar, din păcate, regulile de prelucrare standard @ font-face în cele mai multe browsere este problematică. Când conectați la un fonturi web externe folosind @ font-face, cele mai multe browsere vor face orice text la care aplicați fontul, complet invizibil pentru timpul de încărcare a fontului extern. [Vezi. Fig. 1]. Unele browsere va aștepta descărca fontul pentru o cantitate prestabilită de timp (de obicei trei secunde) înainte de a va afișa textul folosind fontul alternativ specificat în proprietate font-family. Dar browsere pentru a „motor» WebKit (Safari, browser-ul standard de Android, BlackBerry), la fel ca un câine puțin devotat va aștepta pentru totdeauna (bine, de obicei, de 30 de secunde sau mai mult) descărcați fontul dorit. Acest lucru înseamnă că fonturile dvs. personalizate reprezintă un potențial "punct unic de eșec" pentru un site accesibil.
Fig. 1: O captură de ecran a paginii web încărcată în iOS Safari, unde textul rămâne invizibil în timpul încărcării fonturilor personalizate.
Practicați HTML5 și CSS3 de la zero la rezultatul!
De exemplu, în Fig. 2 prezintă o cronologie pe site-ul webpagetest.org. care arată modul în care site-ul filamentgroup.com va arăta atunci când conexiunea 3G stabilă, dacă ați utilizat comportamentul standard atunci când descărcați fonturi. Rețineți că textul la care se aplică regula @ font-face se aplică numai după o secundă după randarea primară:
Fig. 2: Cronologie pentru descărcarea site-ului web al grupului Filament (utilizând descărcări de fonturi standard). Cu conexiune 3G, încărcarea fontului este întârziată pentru o secundă.
Utilizatorii noștri au nevoie de o pagină gata, cât mai curând posibil - în mod ideal, într-o secundă - adică avem nevoie ca textul să apară cât mai aproape de acest indicator. Există mai multe abordări pe care le puteți utiliza în acest caz, dar cel mai de bază lucru pe care îl puteți face este să renunțați la modul standard de încărcare a fonturilor, pe care am menționat-o mai devreme.
Iată criteriile pe care ar trebui să le urmați la evaluarea abordării de încărcare a fonturilor:
O solicitare CSS care conține o regulă font-face (a) nu ar trebui să blocheze redarea paginilor. În loc să vă conectați fonturile printr-un elementCererile de fonturi trebuie să fie configurate astfel încât să se afișeze un text alternativ în timpul încărcării, evitând astfel pâlpâirea / intermitentul la încărcarea textului (Blițul textului invizibil sau FOIT).
Cum se pot descărca fonturile în grupul Filament
PASUL 1: PREGĂTIREA FONTELOR
Fonturile personalizate pot fi foarte grele, deci în primul rând trebuie să minimizați numărul de fonturi pentru descărcare. Amintiți-vă că fiecare variantă a fontului regulat (regular, light, bold) și italic (bold italic) este un fișier separat, care poate crește rapid volumul total al fonturilor descărcate. Încercați să vă asigurați că numărul total de fonturi personalizate nu depășește 5 bucăți, dar de obicei, dacă este posibil, încercați să utilizați 2-3 fonturi.
Pentru a îmbunătăți în continuare livrarea de fonturi, utilizați tehnica de "împărțire" a fontului, ceea ce vă permite să eliminați din literele și simbolurile de font pe care nu aveți nevoie. Cu serviciul FontSquirrel este destul de ușor de făcut.
PASUL 2: PREPAREA TABELELOR DE STELE CU FONTURI
Codarea fonturilor cu date: URI
Să presupunem că utilizați fontul Open Sans în două variante de saturație: 400 și 700 (bold). Pentru a suporta cel mai mare număr de browsere, avem nevoie de trei formate diferite pentru fiecare opțiune: WOFF2, WOFF și TrueType (TTF):
Practicați HTML5 și CSS3 de la zero la rezultatul!
Dacă nu aveți suficiente, de exemplu, unul dintre aceste formate, atunci îl puteți crea folosind fonturile pentru generatorul de fonturi.
Atunci fiecare dintre aceste fișiere pentru a imprima și le codifică pentru introducerea ulterioară într-o foaie de stil folosind date: URI. Dacă nu sunteți familiarizați cu modul de a face acest lucru, există mai multe opțiuni: Sass (Compass), PHP, generatoare on-line sau OpenSSL pe linia de comandă (OpenSSL base64 -in filename.woff).
Copiați rezultatele în trei stylesheet separat, un fișier CSS pentru fiecare format: WOFF2 (date-woff2.css), WOFF (date-woff.css) și TET (date-ttf.css pentru Android). Aici, de exemplu, cum poate arata data-woff.css:
În interiorul tuturor celorlalte fonturi, formatul (...) formatului src: url (...) trebuie să se potrivească cu un anumit format. De exemplu, în fișierul de date-woff2.css vi se va da URL ( «date: application / font-woff2; charset = utf-8; base64, ...») Format ( «woff2" ), și pentru date ttf.css - URL-ul ( «date: application / x-font-TET; charset = utf-8; base64, ...») format ( «truetype»);
PASUL 3: SETAREA LOADERULUI STYLE STYLE
După ce fișierul de fonturi este pregătit, trebuie să îl încărcăm asincron pentru a evita aprinderea / pâlpâirea textului. Utilizăm utilitarul nostru loadCSS pentru a face acest lucru. De exemplu, iată cum putem folosi loadCSS pentru a încărca fonturi în format WOFF2:
Desigur, trebuie să descărcăm o foaie de stil potrivită cu un font pentru fiecare browser care vizitează site-ul nostru. Cum determinăm ce format să folosim? În mod prestabilit, folosim formatul WOFF datorită suportului larg pentru browser. Dacă browserul este testat pentru a sprijini formatul WOFF2, folosim formatul WOFF2, deoarece dimensiunea acestuia este de obicei mai mică cu 30%. Dacă suntem suficient de încrezător pentru a determina că browser-ul curent este browser-ul implicit pe «motor» Android Webkit (nu Chrome), vom trece la formatul TET cu suport pentru Android 4.x. Rețineți că dacă este încărcat un format incorect, browserul va folosi pur și simplu o alternativă cu fonturi locale.
Browserul nu va face textul invizibil, deoarece fișierul nostru CSS cu datele: URI este încărcat în mod asincron. Aceasta înseamnă că puteți citi textul alternativ în timp ce încărcați fonturile web (chiar dacă cererea "se blochează" și răspunsul nu a fost primit).
Fig. 3: Succes! Iată cronologia pentru descărcarea site-ului nostru folosind metoda noastră de încărcare a fonturilor personalizate. Dacă este utilizată o conexiune 3G, fontul este deja afișat în timpul redării primare.
Utilizați cookie-uri pentru a face chiar mai bine
În momentul de față, ne-am concentrat pe pregătirea și descărcarea gânditoare a fonturilor personalizate. Astfel, putem afișa un font alternativ în timp ce așteptăm încărcarea fonturilor personalizate. Atunci când fonturile necesare se încarcă, browserul va înlocui fonturile standard cu fonturi personalizate. Aceasta va determina reeșantionarea și, de regulă, schimbări mici în marcare, deoarece fonturile au dimensiuni ușor diferite. Credem că atunci când vizitați pagina pentru prima dată, acest "sacrificiu" este justificat, deoarece adesea oferim utilizatorilor o pagină mai rapidă, dar această situație poate irita utilizatorii atunci când navighează pe site.
Pentru a rezolva această problemă, folosim module cookie pentru a determina dacă fonturile personalizate sunt încărcate și dacă se află în memoria cache a browserului. Dacă da, afișăm imediat fonturi personalizate pentru a evita schimbările în marcare.
Codul de mai sus necesită un modul special pentru serverul Apache. Dar puteți folosi ceva similar cu orice limbă de server.
Pentru a afla mai multe despre această abordare folosind modulele cookie, am pregătit și codul sursă pentru dvs. pe GitHub.
Pentru a rezuma
Folosirea fonturilor web poate fi o modalitate foarte bună de a îmbunătăți calitatea proiectului dvs. web, dar descărcarea fonturilor în mod obișnuit poate fi foarte dăunătoare pentru performanța site-ului percepută de utilizatori. Metoda de mai sus se potrivește perfect cu problema textului invizibil, asociată de obicei cu regula @ font-face, și mult mai rapid face paginile noastre accesibile utilizatorilor. Sperăm că pentru dvs. (și utilizatorii dvs.) va fi util!
Ediție: Comanda webformself.
Practicați HTML5 și CSS3 de la zero la rezultatul!
Cele mai recente știri despre dezvoltarea IT și web pe canalul nostru de telegrame