Share
FOUT (en flash av ustabil tekst) er det du ofte ser i det korte øyeblikk før en nettleser har hatt mulighet til å laste inn og bruke webfonter. Typekit og Google Web Fonts gir oss en vei rundt denne ulempen - her er et raskt tips for å forklare nøyaktig hvordan.
Kreditt går til Dan for dette, etter at hans siste artikkel minnet meg om WebFont Loader. Det er så nyttig jeg skjønte det var verdt å kaste inn et raskt tips.
Hva et passende akronym (på nederlandsk betyr det feil). I alle fall, når du bruker webfonter, må de lastes inn i nettleseren din som ressurser (akkurat som bilder og skript) som kan ta et øyeblikk. I denne situasjonen vil nettleseren din se på fontstakken ...
kropp font-family: 'Oswald', Arial, sans-serif;
... for å bestemme hvilken skrifttype som skal vises mens nettfonten (Oswald i dette eksemplet) gjør reisen. Når web skrifttypen er tilgjengelig, vil det sannsynligvis være en "flash" som fallback skrifttypen forsvinner og den påtatte skriften tar sitt rettmessige sted. Ikke ideell.
Webfontloader-skriptet ble basert sammen av Google og Typekit, og er gjort tilgjengelig som standard med begge tjenestene.
Det legger til klassenavn til element for å gjenspeile statusen til eventuelle webfonter som lastes inn. Mens lasting skjer, brukes dette:
Mer spesifikt er klasser lagt til for hver skrift i rørledningen (for eksempel Droid Serif Normal 400):
Når prosessen er fullført, oppdateres disse klassene:
Eller hvis det oppstår et problem med å laste inn eiendelene:
Disse klassene gir oss stor fleksibilitet når det gjelder å bestemme hva en bruker opplever på et gitt punkt i webtekstgengivelsesprosessen. La oss nå bygge et eksempel for å gjøre ting helt klart.
Ok, jeg hoppet over et trinn, jeg antar at du har et html-dokument for å jobbe med. Last ned kildefilene, og du vil finne en mappe som heter "demo-start-block". Åpne index.html i den, og du er god til å gå.
Gå videre til Google Web Fonts og velg en skrift eller to for bruk i prosjektet ditt.
Når du har slått "Legg til i samling", hodet ned til bunnen av skjermen og trykk "Bruk" hvor du ser et sammendrag av samlingen din så langt.
Mens normalt kan du velge å koble direkte til css-filen som er lagret på Googles gigantiske servere, trykke på JavaScript-fanen og kopiere koden du får.
Google foreslår at du limer inn denne utklippet som det første elementet etter åpningen tag - og med god grunn. Det er viktig at dette skriptet får lov til å bruke klassenavnene (vi snakket om tidligere) så snart som mulig for å bekjempe feil. Hvis du trakk denne JavaScript inn etter alt annet på siden, vil fallback skrifttypen ha blitt gitt en sjanse til å bak sitt gale hode ...
Her er koden min, trygt hvor den tilhører:
La oss bruke vår Boogaloo-skrift til alt på siden (jeg går ikke for stilpoeng her). Åpne opp css / styles.css og spar ting med:
kropp font-family: 'Boogaloo', kursiv;
Alle de faktiske @ font-face jiggery-pokery har blitt behandlet med server-side av Google - vi må bare bruke verdien som angitt.
Ok, på dette punktet ser du FOUT-effekten jeg har slått på så mye (selv om det er klart * veldig * kort). Hvis du vil se det tydeligere, kan du prøve å legge til hundrevis av fonter i samlingen din, som skal bremse ting ...
Accentsconagua
wf- * Det finnes alle slags ting du kan gjøre med innholdet på nettsiden din, for å gjenspeile skriftstatusstatusen. La oss bruke et pseudo-element for å informere brukerne hva som skjer.
Fortsetter videre i våre styles.css, legg til et: etter pseudo-element til vår HTML mens den har en wf-lastingsklasse, slik som:
.wf-loading: etter / * først opp, må vi definere noe innhold * / innhold: "loading fonts ..."; / * la oss nå gi noen dimensjoner, en bakgrunnsfarge og plassere den på siden * / bredde: 100%; høyde: 100%; posisjon: fast; topp: 0; venstre: 0; / * ok, så hva vil vi at vår etikett egentlig ser ut? * / farge: # 135040; skriftstørrelse: 1.5em; font-weight: bold; linjehøyde: 20em; tekst-align: center;
Vi har hovedsakelig dekket hele siden med en stor etikett, kommentarene i CSS skal gjøre det klart hva som skjer. Her er et skjermbilde av hva du kan se mens skrifttypen lastes:
Selvfølgelig, når skrifttypen er ferdig lastet, blir belastningsklassene fjernet og erstattet med andre statuser. De :etter pseudo-elementet opphører å avsløre siden med din web skrifttype brukt. Ingen feil!
Effekten vi nettopp har oppnådd, gjør jobben perfekt, men etiketten forsvinner bare når skrifttyper er lastet, og avslører innholdet under. Vi kan sikkert forbedre det?
Frustrerende, overganger på generert innhold er fortsatt svakt støttet, slik at vi ikke kan stole på noen triks der. Det vi kan gjøre er å skjule alt sidens innhold, overføre det i en gang til -lastet klasser har blitt brukt.
Prøv dette. Bli kvitt alle stilene vi nettopp har laget, plasserer dette øverst på css-filen din:
.wf-loading * / * Første ting først, vi trenger å gjemme alt, men husk at dette bare får virkning når lasteskriptet har tatt i bruk. her skjuler vi alt innhold i når den har klassen "wf-loading" * / opacity: 0; kropp font-family: 'Boogaloo', kursiv;
Denne lille nugget kommer til å gjemme seg (gjennom å redusere opaciteten til 0) hver element innenfor html.wf-lasting. Det er den aller første regelen, gjemmer alt før FOUT finner sted.
Med innholdet skjult, kan vi bruke en bakgrunn til vårt HTML-element.
.wf-loading / * her er et bakgrunnsbilde (på en 723bit) for å indikere noe som skjer * / bakgrunn: url ('... /images/ajax-loader.gif') ikke-gjentatt senter senter; / * bare for å sikre at elementet deler de samme dimensjonene som nettleservinduet når du laster inn (og ikke den potensielt langstrakte siden) * / høyde: 100%; overløp: skjult; Vi har brukt en loader.gif generert av et av de mange elektroniske verktøyene som er tilgjengelige. Uansett hvilken bakgrunn du velger, bør den være lett. Det er ingen grunn til å prøve å forhåndsbelaste en skriftfil på 20Kb ved å vise en grafikk på 4Mb ...
Nå, hvis vi laster inn vår side, er alt innhold skjult, bortsett fra html.wf-lasting med sin loader gif bakgrunn. Når skrifttypen laster, vil det gif forsvinne.
HTML-elementet har nå blitt tildelt andre klasser, så la oss bruke dem til å bringe tilbake det usynlige innholdet:
.wf-aktiv *, .wf-inaktiv * / * legg til noen overgangseffekter for å gjeninnføre innholdet gradvis når fonter er lastet * / -webkit-overgang: opacity 1s utelukkelse; -moz-overgang: opacity 1s utelukkelse; -Overgang: Opacity 1s utelukkelse; overgang: opacity 1s utelukkelse;
Uansett om skrifttypen ble lastet inn eller ikke, må vi se innholdet på nytt. wf-lasting frigjør grepet på null-dekselet på alle elementene på siden, så vi overfører dem sakte tilbake igjen. Igjen, for å sakte sakene, prøv å legge til mange skrifter (eller spill med klassenavnene i nettleserens elementinspektør.) Skriftene er lagres også, slik at hver gang du tester det, må du kanskje tømme nettleserens cache.
Enkel, men effektiv. Min favoritt slags tips. Og mulighetene er uendelige - hvordan vil du foreslå å bruke wf- * klasser?
Sist, men ikke minst, kunne jeg ikke motstå denne preloaderen av Kontramax på dribble. Det er litt tungt for våre formål, men hva hei!
