# 035: Preprečevanje Typekit FOUT - CSS-triki

Anonim

Malo si oddahnemo od dela na področju iskanja, da bi rešili težavno težavo.

»FOUT« je »Flash nestiliziranega besedila«. To je pojav, pri katerem se pisave @ font-face naložijo malo in tako vidite nadomestno pisavo pred pisavo po meri. V Typekitu to običajno ni težava. Tudi današnji brskalniki v resnici niso problem (razen IE 9). Vendar predstavlja za nas težavo, ker smo se posebej odločili, da bomo Typekit JavaScript nalagali asinhrono.

Vendar upanje še ni izgubljeno, Typekit ima to težavo zajeto, le malo moramo opraviti na naši spletni strani. Na element, imenovan "wf-loading" (nalaganje spletne pisave), smo dodali novo ime razreda . Nato v našem CSS izjavimo, da je vsak izbirnik, ki uporablja pisavo po meri, vidno skrit, dokler to ime razreda ne izgine. Morda bi si mislili nekoliko tvegano, če pa se pisava ne naloži, obstaja časovna omejitev, ki razred vseeno odstrani. To je samo za boj FOUT ne pozabite, le malo vizualne lepote.

Vse to naredimo tako, da naredimo malo Sass-a, @mixinimenovanega »preprečiteFUT«, in @includega vnesete v svoje sklade pisav po meri, ki so prav tako @mixins.

Zdaj nam to dobro uspeva. Na koncu se pri tej zasnovi premaknemo na pisave HF&J, pri katerih se naloži neposredno prek @ font-face, zato v bistvu nehamo skrbeti zaradi tega.