Lettertype-events zijn inbegrepen bij JavaScript font loading, dat wordt gebruikt voor dynamic subsetting. Met de lettertype-events kun je je webpagina aanpassen op basis van of de lettertypen actief zijn, nog aan het laden zijn of om welke reden dan ook niet beschikbaar zijn.
Lettertype-events zijn nog niet beschikbaar voor CSS font loading.Als je de standaard of @import CSS-insluitcode op je website gebruikt, kun je een andere JavaScript-bibliotheek toevoegen om het laden van je lettertype aan te passen.
Lettertype-events gebruiken in CSS
Om je te helpen beter te bepalen hoe je pagina wordt weergegeven terwijl lettertypen aan het laden zijn of inactief zijn, biedt de JavaScript embed code een reeks lettertype-events die worden geactiveerd wanneer lettertypen op de pagina worden geladen.
Er zijn drie belangrijke lettertype-events, elk met een bijbehorende klassenaam (tussen haakjes):
- loading (.wf-loading): weblettertypen worden geladen
- active (.wf-active): weblettertypen zijn actief
- inactive (.wf-inactive): weblettertypen zijn inactief
De CSS-klassen die aan deze events zijn gekoppeld, worden tijdens het laden toegevoegd aan het HTML-element. Ze kunnen worden gebruikt in je stylesheets om te bepalen hoe de pagina wordt vormgegeven terwijl lettertypes worden geladen. Bijvoorbeeld:
Veelvoorkomende toepassingen van lettertype-eventklassen zijn het controleren van de flits van onvormgegeven tekst (FOUT) en het definiëren van fallback-lettertypes en -stijlen voor browsers die geen weblettertypes ondersteunen of deze hebben uitgeschakeld. Het is altijd een goed idee om fallback-lettertypes en -stijlen op te nemen, omdat sommige combinaties van browser, besturingssysteem en gebruikersvoorkeuren ertoe kunnen leiden dat lettertypes inactief zijn op je pagina.
JavaScript-lettertypegebeurtenissen
Deze lettertypegebeurtenissen zijn ook beschikbaar als JavaScript-callbackhooks via de Typekit.load-methode.Je kunt een object met callback-functies doorgeven wanneer je Typekit.load aanroept, en deze callback-functies worden aangeroepen wanneer verschillende lettertype-events optreden tijdens het laden. Bijvoorbeeld:
JavaScript-callbacks kunnen worden gebruikt om effecten zoals fade-ins toe te voegen wanneer lettertypes zijn geladen of om complexe wiskundige aanpassingen uit te voeren voor presentatielay-outs op basis van de afmetingen van weergegeven tekst.
Naast deze basislettertype-events worden ook meer gedetailleerde lettertype-events voor individuele lettertypevariaties geboden.De klassenamen voor deze events zijn een combinatie van lettertypefamilienaam, lettertype-variatieomschrijving en een lettertype-eventnaam. Dus bijvoorbeeld het toevoegen van het normale 400-gewicht van Gesta aan een Project zou resulteren in lettertype-eventklassen zoals wf-gesta-n4-loading en wf-gesta-n4-active. Aan de JavaScript-kant zijn fontloading-, fontactive- en fontinactive-callbacks beschikbaar en kunnen de lettertypefamilie en lettetype-omschrijving voor elke individuele variatie worden doorgegeven.
Lettertype-events gebruiken: de flits van onvormgegeven tekst (FOUT) beheren
Elke browser handelt het laden van Web Fonts op zijn eigen manier af.Als een browser de tekst eerst weergeeft met een reservelettertype en vervolgens overschakelt naar de gekoppelde lettertypen nadat deze zijn geladen, kan er een flits van ongestileerde tekst of FOUT optreden.
Wanneer lettertypen worden geladen, wordt een class van .wf-loading toegepast op het HTML-element. Zodra de lettertypen zijn geladen, verandert die class naar .wf-active. Je kunt dus het volgende toevoegen aan je stylesheets:
Je kunt vervolgens je stijlen aanpassen om de FOUT minder storend te maken; bijvoorbeeld door ervoor te zorgen dat het geflitste lettertype en het geladen weblettertype even groot lijken. Of je kunt je tekst verbergen totdat het lettertype volledig is geladen. Bijvoorbeeld:
Het gedeelte over het stylen van reservelettertypen bevat meer voorbeelden van het instellen van CSS-stijlen met Font Events.
Font events gebruiken: reservelettertypen stylen
Lettertypen worden geladen als middelen in een webpagina—net zoals afbeeldingen of video. Afhankelijk van de combinatie van besturingssysteem, browser, geïnstalleerde extensies, gebruikersvoorkeuren en verbindingssnelheid kunnen Web Fonts soms niet worden geladen.In deze gevallen worden in plaats daarvan de reservelettertypen in de CSS-stack gebruikt.
Je kunt bijvoorbeeld de grootte van de reservelettertypen aanpassen bij het gebruik van een smal weblettertype, zodat je lay-out consistent blijft, zelfs wanneer de weblettertypes niet kunnen worden geladen. Hieronder wordt beschreven hoe u dat doet:
Font events gebruiken: de flits van onzichtbare tekst (FOIT) simuleren voor dynamische projecten
Standaard renderen dynamische projecten weblettertype-gestylede tekst met de Flash Of Unstyled Text (FOUT). Dit betekent dat de browser reservelettertypen weergeeft terwijl de Web Fonts laden en vervolgens overschakelt naar de Web Fonts zodra deze beschikbaar zijn voor gebruik.Dit verschilt van de alternatieve benadering voor het renderen van weblettertypes, waarbij een browser tekst verbergt terwijl weblettertypes worden gedownload en vervolgens de tekst toont, gestyled met het weblettertype, zodra de weblettertypes zijn geladen. Dat wordt de Flash Of Invisible Text (FOIT) genoemd.
De FOUT-benadering zorgt voor meer direct bruikbare pagina's, vooral bij langzamere netwerkverbindingen, maar als je de voorkeur geeft aan de FOIT-benadering, kun je deze simuleren in alle browsers door lettertypegebeurtenissen te gebruiken.Font events zijn drie classes die worden toegevoegd aan het element:
- .wf-loading: Toegevoegd tijdens het laden van lettertypen;
- .wf-active: Toegevoegd wanneer minstens één lettertype is geladen;
- .wf-inactive: Toegevoegd wanneer geen van de lettertypen is geladen.
Je kunt deze drie classes in je CSS gebruiken om FOIT-laden te simuleren door tekst te verbergen wanneer de wf-loading class actief is en de tekst te tonen wanneer de wf-active of wf-inactive class actief is:
Als de h1- en p-elementen bijvoorbeeld een weblettertype gebruiken, gebruik dan deze CSS om ze te verbergen terwijl de lettertypen laden.
Verwante informatie
Adobe Fonts verkennen
Vind het perfecte lettertype voor elk web- of drukwerkproject.
