Skrifttypehændelser

Skrifttypehændelser er inkluderet med JavaScript-skrifttypeindlæsning, som bruges til dynamisk subsetting.Skrifttype-events giver dig mulighed for at tilpasse din webside baseret på, om skrifttyperne er primære, stadig indlæser eller utilgængelige af en eller anden grund.

Skrifttype-events er endnu ikke tilgængelige for CSS skrifttype-indlæsning.Hvis du bruger standard eller @import CSS-indlejringskoden på webstedet, kan du inkludere et andet JavaScript-bibliotek for at tilpasse skrifttype-indlæsningen.

Brug af skrifttype-events i CSS

For at hjælpe dig med bedre at styre, hvordan din side vises, mens skrifttyper indlæses eller er inaktive, leverer JavaScript-indlejringskoden et sæt skrifttype-events, der udløses, når skrifttyper indlæses på siden.

Der er tre hovedskrifttype-events, som hver har et tilsvarende klassenavn (i parentes):

1. indlæser (.wf-loading): Web Fonts indlæses
2. aktiv (.wf-active): Web Fonts er aktive
3. inaktiv (.wf-inactive): Web Fonts er inaktive

CSS-klasserne, der er forbundet med disse events, tilføjes til HTML-elementet under indlæsning. De kan bruges i dine stylesheets til at styre, hvordan siden er stylet, når skrifttyper indlæses. F.eks.:

Almindelig brug af skrifttype-event-klasser er at styre flashet af ustylet tekst (FOUT) og at definere fallback-skrifttyper og -stile for browsere, der ikke understøtter web skrifttyper eller har dem slået fra. Det er altid en god idé at inkludere fallback-skrifttyper og -stile, da nogle kombinationer af browser, OS og brugerpræferencer resulterer i, at skrifttyper er inaktive på din side.

JavaScript-skrifttypehændelser

Disse skrifttype-events er også tilgængelige som JavaScript-callbacks via Typekit.load-metoden.Du kan videregive et objekt, der indeholder callback-funktioner, når du kalder Typekit.load, og disse callback-funktioner kaldes, når forskellige skrifttypehændelser opstår under indlæsning.F.eks.:

JavaScript callbacks kan bruges til at tilføje ting som fade-ins, når skrifttyper er indlæst, eller til at foretage kompleks matematisk størrelsesændring af præsentationslayouts baseret på dimensionerne af renderet tekst.

Ud over disse grundlæggende skrifttype-events leveres også mere granulære skrifttype-events for individuelle skrifttype-variationer. Klassenavnene for disse events er en kombination af skrifttypefamilienavn, skrifttype variation beskrivelse og et skrifttype-eventnavn. Så for eksempel ville tilføjelse af den normale 400-tykkelse af Gesta til et Projekt resultere i skrifttype-event-klasser som wf-gesta-n4-loading og wf-gesta-n4-active. På JavaScript-siden er fontloading, fontactive og fontinactive callbacks tilgængelige og kan videregives skrifttypefamilien og skrifttypebeskrivelsen for hver individuel variation.

Brug af skrifttype-events: håndtering af flashet af ustylet tekst (FOUT)

Hver browser håndterer indlæsning af Web Fonts på sin egen måde. Hvis en browser først viser teksten med en reserveskrifttype og derefter skifter til de linkede skrifttyper, efter de er færdige med at indlæse, kan du få et blink af ustylet tekst eller FOUT.

Når skrifttyper indlæses, anvendes en klasse på .wf-loading til HTML-elementet. Når skrifttyperne er indlæst, ændres denne klasse til .wf-active. Så du kunne tilføje følgende til dine stylesheets:

Du kan derefter justere dine styles for at gøre FOUT mindre skurrende; for eksempel ved at sikre, at den blinkende skrifttype og den indlæste webskrifttype ser ud til at være samme størrelse.Eller du kunne skjule din tekst, indtil skrifttypen er fuldstændig indlæst. F.eks.:

Afsnittet styling fallback fonts har flere eksempler på at indstille CSS-styles med Font Events.

Brug af font events: styling fallback fonts

Skrifttyper indlæses som ressourcer på en webside—ligesom billeder eller video.Afhængigt af kombinationen af operativsystem, webbrowser, installerede udvidelser, brugerindstillinger og forbindelseshastighed kan Web Fonts nogle gange ikke indlæse. I disse tilfælde vil reserveskrifttyperne i CSS-stakken blive brugt i stedet for.

For eksempel kan du justere størrelsen på reserveskrifttyperne, når du bruger en kondenseret Web Font, så dit layout forbliver konsistent, selv når Web Fonts mislykkes i at indlæse. Sådan gør du:

Brug af font events: simulering af flash of invisible text (FOIT) for dynamiske projekter

Som standard vil dynamiske projekter gengive Web Font-stylet tekst med Flash Of Unstyled Text (FOUT). Dette betyder, at browseren vil gengive reserveskrifttyper, mens Web Fonts indlæser, og derefter skifte til Web Fonts, når de er tilgængelige til brug. Dette er forskelligt fra den alternative tilgang til Web Font-gengivelse, hvor en browser vil skjule tekst, mens Web Fonts downloader, og derefter vise teksten, stylet med Web Font, når Web Fonts er indlæst. Det kaldes Flash Of Invisible Text (FOIT).

FOUT-tilgangen gør sider mere umiddelbart brugbare, særligt på langsommere netværksforbindelser, men hvis du foretrækker FOIT-tilgangen, kan du simulere den på tværs af alle browsere ved at bruge font events. Font events er tre klasser, der tilføjes til elementet:

1. .wf-loading: Tilføjet mens skrifttyperne indlæses;
2. .wf-active: Tilføjet når mindst én skrifttype er indlæst;
3. .wf-inactive: Tilføjet når ingen af skrifttyperne er indlæst.

Du kan bruge disse tre klasser i din CSS til at simulere FOIT-indlæsning ved at skjule tekst, når wf-loading-klassen er aktiv, og vise teksten, når wf-active- eller wf-inactive-klassen er aktiv:

For eksempel, hvis h1- og p-elementerne bruger en web font, brug denne CSS til at skjule dem, mens skrifttyperne indlæses.

Mere som dette

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