Mēs nedaudz atpūšamies darbā ar meklēšanu, lai atrisinātu nelielu niecīgu problēmu.
“FOUT” ir “Stila teksta zibspuldze”. Šī ir parādība, kad @ font-face fontu ielādēšanai ir nepieciešams nedaudz laika, un tādējādi jūs redzat rezerves fontu pirms pielāgotā fonta. Tas parasti nav problēma Typekit. Mūsdienās tā īsti nav arī mūsdienu pārlūkprogrammu problēma (izņemot IE 9). Tomēr mums tā ir problēma, jo mēs speciāli esam izvēlējušies asinhroni ielādēt Typekit JavaScript.
Cerība tomēr nav pazudusi, Typekit ir aptvērusi šo problēmu, mums vienkārši jāpaveic sava vietne. Elementam ar nosaukumu “wf-loading” (tīmekļa fontu ielāde) mēs ievietojām jaunu klases nosaukumu . Tad mūsu CSS mēs paziņojam, ka jebkurš atlasītājs, kas izmanto pielāgotu fontu, ir redzami paslēpts, līdz šī klases nosaukums izzūd. Jūs varētu domāt par nedaudz riskantu, bet, ja fontu neizdodas ielādēt, ir noildze, kas tik un tā noņem klasi. Tas ir tikai cīņai ar FOUT atcerieties, tikai nelielu vizuālu jaukumu.
Mēs to visu darām, izveidojot nelielu Sass ar @mixinnosaukumu “preventFOUT” un ierakstot @includeto mūsu pielāgotajos fontu kaudzēs, kas arī ir @mixins.
Tas mums tagad labi darbojas. Galu galā šajā dizainā mēs pārietam uz HF & J fontiem, kas tiek ielādēti tieši caur @ font-face, tāpēc mēs par to vairs neuztraucamies.