Fonthändelser

Font-händelser ingår i JavaScript font loading, som används för dynamic subsetting. Font-händelserna låter dig anpassa din webbsida baserat på om teckensnitten är primär, fortfarande laddar eller otillgängliga av någon anledning.

Fonthändelser är ännu inte tillgängliga för CSS font loading. Om du använder standard- eller @import CSS-inbäddningskoden på din webbsida kan du inkludera ett annat JavaScript-bibliotek för att anpassa din font-laddning.

Använda fonthändelser i CSS

För att hjälpa dig att bättre styra hur din sida visas medan teckensnitt laddar eller är inaktiva tillhandahåller JavaScript-inbäddningskoden en uppsättning font-händelser som utlöses när teckensnitt laddas på sidan.

Det finns tre huvudsakliga fonthändelser, var och en med ett motsvarande klassnamn (inom parentes):

1. loading (.wf-loading): Webb-teckensnitt laddar
2. active (.wf-active): Webb-teckensnitt är primär
3. inactive (.wf-inactive): Web Fonts är inaktiva

CSS-klasserna som är associerade med dessa händelser läggs till HTML-elementet under laddning. De kan användas i dina stilmallar för att styra hur sidan formateras när teckensnitt laddas.Exempel:

Vanliga användningsområden för teckensnittshändelseklasser är att styra blinkningen av ostylad text (FOUT) och att definiera reservteckensnitt och stilar för webbläsare som inte stöder Web Fonts eller har dem avstängda.Det är alltid en bra idé att inkludera reservteckensnitt och stilar eftersom vissa kombinationer av webbläsare, OS och användarpreferenser resulterar i att teckensnitt blir inaktiva på din sida.

JavaScript Font-händelser

Dessa teckensnittshändelser är också tillgängliga som JavaScript callback-funktioner via metoden Typekit.load.Du kan skicka ett objekt som innehåller återanropsfunktioner när du anropar Typekit.load, och dessa återanropsfunktioner kommer att anropas när olika font-händelser inträffar under laddning. Exempel:

JavaScript-återanrop kan användas för att lägga till saker som fade-ins när teckensnitt har laddats eller för att göra komplexa matematiska storleksändringar för presentationslayouter baserat på dimensionerna av renderad text.

Utöver dessa grundläggande teckensnitthändelser tillhandahålls även mer detaljerade teckensnitthändelser för enskilda teckensnittvariationer.Klassnamnen för dessa händelser är en kombination av font-familjenamn, font variation beskrivning och ett font-händelsenamn. Så till exempel skulle tillägg av normal 400-bredd av Gesta till ett projekt resultera i font-händelseklasser som wf-gesta-n4-loading och wf-gesta-n4-active. På JavaScript-sidan är fontloading-, fontactive- och fontinactive-återanrop tillgängliga och kan skickas font-familjen och font-beskrivningen för varje enskild variation.

Använda font-händelser: hantera blinkningen av ostylade text (FOUT)

Varje webbläsare hanterar laddning av webbteckensnitt på sitt eget sätt. Om en webbläsare först visar texten med ett reservteckensnitt och sedan växlar till de länkade teckensnitten efter att de har laddats färdigt, kan du få en blixt av ostiliserad text eller FOUT.

När teckensnitt laddas tillämpas en klass av .wf-loading på HTML-elementet. När teckensnitten har laddats ändras den klassen till .wf-active. Så du kan lägga till följande i dina formatmallar:

Du kan sedan justera dina stilar för att göra FOUT mindre skärande, t.ex. genom att se till att det blinkande teckensnittet och det laddade webbteckensnittet ser ut att vara samma storlek. Eller så kan du dölja din text tills teckensnittet är helt laddat. Exempel:

Avsnittet styling av reservteckensnitt innehåller fler exempel på hur du ställer in CSS-stilar med Font Events.

Använda font events: stilar för reservteckensnitt

Teckensnitt laddas som resurser till en webbsida—precis som bilder eller video. Beroende på kombinationen av operativsystem, webbläsare, installerade tillägg, användarinställningar och anslutningshastighet kan webbteckensnitt ibland misslyckas med att laddas. I dessa fall kommer reservteckensnitten i CSS-stacken att användas istället.

Till exempel kan du justera storleken på reservteckensnitten när du använder ett kondenserat webbteckensnitt, så att din layout förblir konsekvent även när webbteckensnitten misslyckas med att laddas. Gör så här:

Använda font events: simulera flash of invisible text (FOIT) för dynamiska projekt

Som standard kommer dynamiska projekt att rendera webbteckensnittsstiliserad text med Flash Of Unstyled Text (FOUT). Det betyder att webbläsaren renderar reservteckensnitt medan webbteckensnitten laddas och sedan växlar till webbteckensnitten när de är tillgängliga.Detta skiljer sig från det alternativa tillvägagångssättet för webbteckensnittsrendering, där en webbläsare döljer text medan webbteckensnitt laddas ned och sedan visar texten, stiliserad med webbteckensnittet, när webbteckensnitten har laddats. Det kallas Flash Of Invisible Text (FOIT).

FOUT-tillvägagångssättet gör sidor mer omedelbart användbara, särskilt på långsammare nätverksanslutningar, men om du föredrar FOIT-tillvägagångssättet kan du simulera det i alla webbläsare genom att använda font events. Font events är tre klasser som läggs till elementet:

1. .wf-loading: Läggs till medan teckensnitt laddas;
2. .wf-active: Läggs till när minst ett teckensnitt har laddats;
3. .wf-inactive: Läggs till när inget av teckensnitten har laddats.

Du kan använda dessa tre klasser i din CSS för att simulera FOIT-laddning genom att dölja text när wf-loading-klassen är aktiv och visa texten när wf-active- eller wf-inactive-klassen är aktiv:

Till exempel, om h1- och p-elementen använder ett webbteckensnitt, använd denna CSS för att dölja dem medan teckensnitten laddas.

Liknande innehåll

• Varför kommer mina webbteckensnitt från use.typekit.net?