Skrifthendelser

Skrifthendelser er inkludert med JavaScript-skriftinnlasting, som brukes for dynamisk delsetting. Skrifthendelsene lar deg tilpasse nettsiden din basert på om skriftene er aktive, fortsatt laster eller utilgjengelige av en eller annen grunn.

Skrifthendelser er ikke tilgjengelige for CSS-skriftinnlasting ennå. Hvis du bruker standard- eller @import CSS-innbyggingskoden på nettstedet ditt, kan du inkludere et annet JavaScript-bibliotek for å tilpasse skriftinnlastingen din.

Bruk av skrifthendelser i CSS

For å hjelpe deg med å bedre kontrollere hvordan siden din vises mens skrifter laster eller er inaktive, gir JavaScript-innbyggingskoden et sett med skrifthendelser som utløses når skrifter lastes inn på siden.

Det finnes tre hovedtyper skrifthendelser, hver med et tilhørende klassenavn (i parentes):

1. laster (.wf-loading): Web fonts laster
2. aktiv (.wf-active): Web fonts er aktive
3. inaktiv (.wf-inactive): Web fonts er inaktive

CSS-klassene forbundet med disse hendelsene legges til HTML-elementet under innlasting. De kan brukes i stilarkene dine til å kontrollere hvordan siden stilsettes når skrifter lastes inn.Eksempel:

Vanlige bruksområder for skrifthendelsesklasser er å kontrollere blinket med ustilsatt tekst (FOUT) og å definere fallback-skrifter og -stiler for nettlesere som ikke støtter web-skrifter eller har dem slått av. Det er alltid en god idé å inkludere fallback-skrifter og -stiler siden noen kombinasjoner av nettleser, operativsystem og brukerinnstillinger vil resultere i at skrifter blir inaktive på siden din.

JavaScript-skrifthendelser

Disse skrifthendelsene er også tilgjengelige som JavaScript-callback-hooks via Typekit.load-metoden. Du kan sende et objekt som inneholder callback-funksjoner når du kaller Typekit.load, og disse callback-funksjonene vil bli utført når ulike skrifthendelser oppstår under innlasting. Eksempel:

JavaScript-callbacks kan brukes til å legge til ting som fade-ins når skrifter har lastet eller til å gjøre kompleks matematisk skalering for presentasjonslayouter basert på dimensjonene til gjengitt tekst.

I tillegg til disse grunnleggende skrifthendelsene tilbys også mer granulære skrifthendelser for individuelle skriftvariasjoner. Klassenavnene for disse hendelsene er en kombinasjon av skriftfamilienavn, skriftvariasjonsbeskriving og et skrifthendelsesnavn. Så for eksempel vil det å legge til normal 400-vekt av Gesta til et prosjekt resultere i skrifthendelsesklasser som wf-gesta-n4-loading og wf-gesta-n4-active. På JavaScript-siden er fontloading, fontactive og fontinactive callbacks tilgjengelige og kan få skriftfamilien og skriftbeskrivelsen for hver individuelle variasjon.

Bruke skrifthendelser: håndtere blinket av ustilsert tekst (FOUT)

Hver nettleser håndterer lasting av Web Fonts på sin egen måte.Hvis en nettleser først viser teksten med en reserveskrift og deretter bytter til de koblede skriftene etter at de er ferdig lastet, kan du få en blits av ustilisert tekst eller FOUT.

Når skrifter lastes, brukes en klasse .wf-loading på HTML-elementet. Når skriftene er lastet, endres klassen til .wf-active. Du kan derfor legge til følgende i stilarkene dine:

Du kan deretter justere stilene dine for å gjøre FOUT mindre forstyrrende, for eksempel ved å sørge for at den blinkende skriften og den lastede webskriften ser ut til å ha samme størrelse.Eller du kan skjule teksten til skriften er fullstendig lastet. Eksempel:

Delen styling av reserveskrifter har flere eksempler på å angi CSS-stiler med skrifthendelser.

Bruke skrifthendelser: styling av reserveskrifter

Skrifter lastes som ressurser inn i en webside – akkurat som bilder eller videoer.Avhengig av kombinasjonen av operativsystem, nettleser, installerte utvidelser, brukerinnstillinger og tilkoblingshastighet, kan web-skrifter noen ganger ikke lastes. I disse tilfellene vil reserveskriftene i CSS-stakken brukes i stedet.

Du kan for eksempel justere størrelsen på reserveskriftene når du bruker en smal web-skrift, slik at layouten forblir konsistent selv når web-skriftene ikke lastes. Slik gjør du det:

Bruke skrifthendelser: simulering av kortvarig usynlig tekst (FOIT) for dynamiske prosjekter

Som standard vil dynamiske prosjekter gjengi web-skrift-stilisert tekst med Flash Of Unstyled Text (FOUT). Dette betyr at nettleseren vil gjengi reserveskrifter mens web-skriftene lastes og deretter bytte til web-skriftene når de er tilgjengelige for bruk. Dette er forskjellig fra den alternative tilnærmingen til web-skrift-gjengivelse, der en nettleser vil skjule tekst mens web-skrifter lastes ned og deretter vise teksten, stilisert med web-skriften, når web-skriftene er lastet. Det kalles Flash Of Invisible Text (FOIT).

FOUT-tilnærmingen gjør sider mer umiddelbart brukbare, spesielt ved tregere nettverksforbindelser, men hvis du foretrekker FOIT-tilnærmingen, kan du simulere den på tvers av alle nettlesere ved å bruke skrifthendelser. Skrifthendelser er tre klasser som legges til elementet:

1. .wf-loading: Lagt til mens skrifter lastes;
2. .wf-active: Lagt til når minst én skrift er lastet;
3. .wf-inactive: Lagt til når ingen av skriftene har blitt lastet.

Du kan bruke disse tre klassene i CSS-en din til å simulere FOIT-lasting ved å skjule tekst når wf-loading-klassen er aktiv og vise teksten når wf-active- eller wf-inactive-klassen er aktiv:

Hvis for eksempel h1- og p-elementene bruker en web-skrift, bruk denne CSS-en til å skjule dem mens skriftene lastes.

Mer som dette

• Hvorfor er webskriftene mine fra use.typekit.net?