Dar astăzi toate argumentele sunt un lucru din trecut. Acum există o nouă practică - pentru a ascunde tot textul la care sunt aplicate fonturile personalizate înainte de încărcarea completă a fișierelor de fonturi. Această metodă se numește "clipește textul ascuns" sau MCT. Această tehnică este deseori numită cea mai gravă dintre opțiuni. Scott Jehl spune că această metodă este rea atât din punct de vedere al performanței, cât și al utilizării:
„Ca o regulă, cele mai multe dintre problemele cu MCT este în browser-ul Safari iOS, care reușesc să ascundă textul timp de 30 de secunde, iar în final, se afișează un font standard. Un efect similar, dar cu mai puțin timp de întârziere poate fi văzut în Chrome, Firefox și Opera. »
În ajutorul pe site-ul Web tip, această problemă este menționată într-un mod similar. "Metoda MNT este mai potrivită pentru utilizarea instantanee a unui site web, în special în cazul conexiunilor lente". Și ca designeri și dezvoltatori trebuie să alegem un lucru, MNT sau MCT.
Flash text ascuns
Fișierul de fonturi începe să se încarce
Tendințe și abordări moderne în dezvoltarea web
Învățați algoritmul de creștere profesională rapidă de la zero în clădirea site-ului
Textul este complet invizibil până când fontul este încărcat
Timpul curge încet
Fontul este în sfârșit încărcat
Intermiterea textului neclasificat
Fișierul de fonturi începe să se încarce
Textul este afișat în fontul specificat în familia de fonturi
Foldbackul este înlocuit cu fontul web dorit
Diferențele dintre cele două metode sunt pur și simplu enorme. Scott mai spune că prin abordarea MCT, textul de pe site-ul Grupului Filament este afișat în 2.7 secunde pe conexiunea 3G și cu MNT până la 0.6. Dacă ne confruntăm cu sarcina de a asigura viteza maximă a interfeței, atunci este necesar să folosim MNT. Această metodă se concentrează pe performanța rețelei și oferă o experiență pozitivă pentru utilizatori.
Probleme în metoda MNT
Această metodă, desigur, are câteva dezavantaje. De exemplu, din cauza diferențelor puternice în font-greutate și proprietăți x înălțime, atunci când se schimbă un font standard pe textul utilizatorului poate sări sau merge prost. Ie în cazul în care o companie dorește să utilizeze pentru a comunica orice font propria marcă, cu metoda de MNT devine nerealistă.
Uneori, astfel de deficiențe pot fi atenuate. Uite, de exemplu, pe site-ul lui Bram Stein. Momentul modificării fontului standard la personalizat este foarte rapid, iar formatarea textului este aproape neschimbată. Dacă nu găsim un font asemănător, va trebui să folosim SVG.
Luați în considerare metoda MNT
Recent, am experimentat cu Web Font Loader. Acest încărcător vă permite să controlați toate etapele de afișare a textului în MNT. Mai întâi, trebuie să introduceți codul de bootloader în marcaj:
Scriptul este încărcat în mod asincron, adică codul poate fi adăugat direct în fața etichetei sau capului de închidere. Alte resurse nu vor fi blocate. Această metodă nu este acceptată în IE9, dar dacă acest lucru nu este atât de important, îl puteți înlocui cu:
După conectarea scriptului, trebuie să adăugați fontul nostru. În acest proiect lateral, am experimentat cu fonturi prin @ font-face de pe site-ul Tiponine. care se adaugă prin link-ul din antetul site-ului:
Tendințe și abordări moderne în dezvoltarea web
Învățați algoritmul de creștere profesională rapidă de la zero în clădirea site-ului
Preconnect aici este foarte util, se face automat o strângere de mână în rețea; Înainte de a solicita un font din scriptul nostru, avem deja informațiile necesare pentru ca browserul să încarce resursele corespunzătoare. Procesul de descărcare este ușor mai rapid. (Mulțumiri lui Ilya Grigorik pentru ajutorul de utilizare a atributului crossorigin). Acum, folosind obiectul WebFontConfig, puteți începe să verificați dacă fontul nostru este încărcat sau nu:
Obiectul personalizat indică Web Font Loader că vrem să încărcăm fonturi din stiluri externe. În acest bootloader, dacă aveți nevoie de el, puteți utiliza fonturile de la Typekit, Google, Fontdeck și Fonts.com. Familia de matrice specifică toate numele de fonturi care vor fi utilizate în familia de fonturi CSS.
S-ar putea să fi observat că am setat întârzierea la 2 secunde. Acesta este doar un număr inventat de mine. Cred că două secunde ar trebui să fie suficiente pentru o solicitare adresată rețelei - chiar și pe conexiuni lente, când utilizatorii au nevoie de cel puțin un conținut. După încărcarea fișierelor de fonturi, etichetei html i se va atribui o clasă:
Aceste clase vor fi utile pentru a stabili stiluri în funcție de încărcarea sau nu a fonturilor. Există clase suplimentare care ne pot ajuta, de asemenea:
încărcare: adăugată când toate fonturile au fost solicitate.
activ: se adaugă atunci când fonturile sunt afișate pe pagină.
Inactiv: adăugat atunci când browserul nu acceptă fonturile sau fonturile specificate nu pot fi încărcate.
Încărcarea fonturilor: adăugată pentru fiecare font descărcat.
fontativ: adăugat pentru fiecare font afișat.
Fontinactive: adăugat dacă fontul nu poate fi încărcat.
Acum, în stiluri puteți seta familia de fonturi necesare în clasa .wf-active:
Primul lucru pe care utilizatorii vor vedea textul de la un $ variabila de rezervă, dar numai cu ajutorul Web Font Loader va fi adăugat la clasa noastră .wf-activă, fonturi va trece la al nostru. Acum trebuie să utilizați tehnica de îmbunătățire progresivă.
Înțelegeți problemele
Una dintre problemele pe care le-am observat a fost asta. După încărcarea și aplicarea fontului în linii, numărul de cuvinte a fost schimbat, iar elementele individuale au devenit fie foarte largi, fie invers foarte înguste. Pentru a rezolva acest lucru, puteți seta diferite dimensiuni ale fontului și înălțimea liniei pentru fonturile standard și personalizate:
Minimizarea efectului de clipire a textului nelistat
Nu uitați să consultați lista completă a evenimentelor disponibile. Cu ajutorul acestui eveniment, putem verifica rapid antetul site-ului și dacă această cheie există în sesiunea Session. Dacă da, eticheta html este atribuită instantaneu clasei corespunzătoare:
Această metodă nu poate elimina complet textul intermitent. Problema va fi relevantă de mult timp. Cu toate acestea, această abordare îmbunătățește semnificativ MCT-ul.
Pentru tipografie bună, descărcarea de fonturi este extrem de importantă
Ediție: Comanda webformself.
Tendințe și abordări moderne în dezvoltarea web
Învățați algoritmul de creștere profesională rapidă de la zero în clădirea site-ului
Cele mai recente știri despre dezvoltarea IT și web pe canalul nostru de telegrame
Practicați HTML5 și CSS3 de la zero la rezultatul!
Trimiteți-le prietenilor: