Share
FOUT (un Flash de Text Unstyled) este ceea ce veți vedea adesea în acel scurt moment înainte ca un browser să aibă șansa să încarce și să aplice fonturi web. Tipul de tip și Fonturile Google Web ne oferă o modalitate prin care ne confruntăm cu acest inconvenient - iată un sfat rapid pentru a explica exact cum.
Creditul este valabil pentru Dan pentru acest lucru, după ce articolul lui recent mi-a amintit de WebFont Loader. Este atât de utilă încât mi-am dat seama că merită să aruncați într-un sfat rapid.
Ce acronim adecvat (în limba olandeză înseamnă eroare). În orice caz, atunci când utilizați fonturi web, acestea trebuie să fie încărcate în browser ca active (la fel ca și imaginile și scripturile), care pot dura câteva clipe. În această situație, browserul dvs. va arăta stiva fontului ...
corp font-family: 'Oswald', Arial, sans-serif;
... pentru a determina ce font ar trebui afișat în timp ce fontul web (Oswald în acest exemplu) își face călătoria. Odată ce fontul web este disponibil, va exista probabil un "flash", deoarece fontul de rezervă dispare și fontul intenționat își ia locul potrivit. Nu este ideal.
Scriptul webfontloader a fost bazat împreună de Google și Typekit și este disponibil în mod prestabilit cu ambele servicii.
Se adaugă numele de clasă la element pentru a reflecta starea oricăror webfonturi încărcate. În timp ce are loc încărcarea, se aplică:
Mai precis, clasele sunt adăugate pentru fiecare font din conductă (de exemplu, Droid Serif Normal 400):
Odată ce procesul este complet, aceste clase sunt actualizate:
Sau în cazul unei probleme de încărcare a bunurilor:
Aceste clase ne oferă o mare flexibilitate în determinarea a ceea ce are un utilizator în orice moment al procesului de redare a fonturilor web. Să construim acum un exemplu pentru a face lucrurile perfect clare.
Bine, am sărit peste un pas, presupun că aveți un document html cu care să lucrați. Descărcați fișierele sursă și veți găsi un dosar numit "demo-start-block". Deschideți index.html în cadrul acestuia și sunteți bine să mergeți.
Deplasați-vă spre Fonturile Google Web și selectați un font sau două pentru a fi utilizate în proiectul dvs..
Odată ce ați apăsat "Adăugați la colecție", mergeți în jos în partea de jos a ecranului și apăsați pe "Utilizați" unde vedeți un rezumat al colecției dvs. până acum.
În timp ce, în mod normal, ați putea să vă conectați direct la fișierul css stocat pe serverele Google gargantuan, să loviți fila JavaScript și să copiați fragmentul dat.
Google sugerează să inserați acest fragment ca primul element după deschidere tag - și cu un motiv bun. Este important ca acest script să aibă permisiunea de a aplica numele de clasă (despre care am vorbit mai devreme) cât mai curând posibil, în scopul de a combate FOUT. Dacă ați scos acest JavaScript în afară după orice altceva de pe pagină, fontul de rezervă va fi dat o șansă să-și înapoieze capul urât ...
Iată fragmentul meu, în siguranță, în cazul în care acesta aparține:
Să aplicăm fontul nostru Boogaloo la tot ce se află pe pagină (nu mă duc aici pentru stil). Deschideți css / styles.css și eliminați lucrurile cu:
corp font-family: "Boogaloo", cursive;
Toate versiunile efective @ jiggery-pokery de tip font-face au fost tratate de serverul Google de către server - trebuie doar să folosim valoarea furnizată.
Bine, în acest moment veți vedea efectul FOUT pe care l-am lovit în jurul valorii de atât de mult (deși, desigur, * foarte * pe scurt). Dacă doriți să o vedeți mai clar, încercați să adăugați sute de fonturi în colecția dvs., care ar trebui să încetinească lucrurile ...
Accentsconagua
wf- * Există tot felul de lucruri pe care le puteți face la conținutul paginii dvs. web, pentru a reflecta în mod specific starea de încărcare a fonturilor. Să folosim un pseudo-element pentru a informa utilizatorii despre ce se întâmplă.
Continuând în stiles.css, adăugați un: după pseudo-element în HTML-ul nostru în timp ce acesta are o clasă wf-load, așa cum este:
.wf-load: după / * prima dată, trebuie să definim conținut * / content: "loading fonts ..."; / * Să-i dăm acum niște dimensiuni, culoarea de fundal și poziția pe pagină * / lățimea: 100%; înălțime: 100%; poziție: fixă; top: 0; stânga: 0; / * bine, deci ce vrem ca eticheta noastră să arate de fapt? * / culoare: # 135040; font-size: 1.5; font-weight: bold; linia-înălțime: 20em; text-align: centru;
Am acoperit în esență întreaga pagină cu o etichetă uriașă, comentariile din CSS ar trebui să clarifice ce se întâmplă. Iată o captură de ecran a ceea ce puteți vedea în timpul încărcării fontului:
Desigur, odată ce fontul sa terminat de încărcat, clasele de încărcare sunt eliminate și înlocuite cu alte stări. :după pseudo-elementul încetează să mai fie, dezvăluind pagina cu fontul dvs. web aplicat. FOTE nu este!
Efectul pe care tocmai l-am obtinut se descurca perfect, insa eticheta dispare doar odata ce fonturile sunt incarcate, dezvaluind brusc continutul de dedesubt. Ne putem îmbunătăți cu siguranță?
În mod frustrat, tranzițiile pe conținutul generat sunt încă slab susținute, astfel încât nu ne putem baza pe niște trucuri acolo. Ce putem face este să ascundem tot conținutul paginii, trecând după o dată -încărcat au fost aplicate clase.
Incearca asta. Scapa de toate stilurile pe care tocmai le-am făcut, plasându-le în partea de sus a fișierului dvs. css:
.wf-loading * / * mai intai lucrurile trebuie sa ascundem totul, dar trebuie avut in vedere ca acest lucru va intra in vigoare numai dupa ce scriptul de incarcare a intrat in vigoare. aici ascundem tot conținutul în o dată ce are clasa "wf-load" * / opacity: 0; corp font-family: 'Boogaloo', cursive;
Acest nugget mic se va ascunde (prin reducerea opacității la 0) fiecare element în interiorul html.wf-loading. Este prima regulă, ascunzând totul înainte de a avea loc Fout.
Cu conținutul ascuns, putem aplica un fundal elementului nostru html.
.wf-loading / * aici este o imagine de fundal (la o viteză mai mică de 723 de biți) pentru a indica ceva ce se întâmplă * / background: url ('... /images/ajax-loader.gif') / * doar pentru a vă asigura că elementul are aceleași dimensiuni ca fereastra browserului atunci când se încarcă (și nu pagina potențial alungită) * / height: 100%; overflow: ascuns; Am folosit un loader.gif generat de unul dintre multele instrumente online disponibile. Evident, indiferent de fundalul pe care îl alegeți, ar trebui să fie ușor. Nu are rost să preîncărcați un fișier de font de 20Kb afișând un grafic de 4MB ...
Acum, dacă încărcăm pagina noastră, tot conținutul este ascuns, în afară de html.wf-loading cu fundalul gif al încărcătorului. Când se încarcă fonturile, acel gif va dispărea.
Elementul html a fost acum alocat altor clase, așa că să le folosim pe cele pentru a aduce înapoi conținutul invizibil:
.wf-active *, .wf-inactive * / * adăugați câteva efecte de tranziție pentru a reintroduce conținutul treptat odată ce fonturile sunt încărcate * / -webkit-transition: opacity 1s ease-out; -moz-tranziție: opacitatea 1s ușurință-out; -o-tranziție: opacitatea 1s ușurință-out; tranziție: ușurință în opacitate 1s;
Indiferent dacă fontul a fost încărcat cu succes sau inutil, va trebui să revedem din nou conținutul. wf-loading vă permite să adăugați o mulțime de fonturi (sau să se joace cu numele de clasă în inspectorul de element al browserului dvs.). Fonturile sunt de asemenea, stocate, de fiecare dată când îl testați, este posibil să fie necesar să goliți memoria cache a browserului.
Simplu, dar eficient. Sfatul meu preferat. Și posibilitățile sunt nesfârșite - cum ți-ai sugera folosirea wf- * clase?
Nu în ultimul rând, nu puteam rezista acestui preloader de Kontramax pe treabă. Este cam greu pentru scopurile noastre, dar ce hei!
