Web Fonts API: Mestre dynamisk kontroll over skriftinnlasting for en forbedret brukeropplevelse

I dagens landskap for webutvikling er det avgjørende å levere en visuelt tiltalende og ytelsessterk brukeropplevelse. Egendefinerte webskrifttyper spiller en avgjørende rolle for merkevarebygging og estetikk, men dårlig implementert skriftinnlasting kan ha betydelig innvirkning på nettstedets ytelse og brukertilfredshet. Web Fonts API gir utviklere detaljert kontroll over skriftinnlasting, slik at de kan optimalisere leveringen av skrifttyper og skape sømløse opplevelser for brukere på tvers av ulike enheter og nettverk over hele verden. Denne omfattende guiden utforsker Web Fonts API i detalj, og dekker funksjonalitet, fordeler og beste praksis for effektiv dynamisk kontroll over skriftinnlasting.

Forstå viktigheten av skriftoptimalisering

Før vi dykker inn i detaljene i Web Fonts API, er det viktig å forstå hvorfor skriftoptimalisering er så avgjørende. Vurder disse nøkkelfaktorene:

• Ytelsespåvirkning: Store skriftfiler kan øke lastetiden på sider betydelig, spesielt på tregere nettverksforbindelser. Dette påvirker brukeropplevelsen negativt, og fører til høyere fluktfrekvens og lavere engasjement.
• Gjengivelsesatferd: Nettlesere håndterer skriftinnlasting forskjellig. Som standard kan noen nettlesere blokkere gjengivelse til skrifttypene er fullstendig lastet, noe som resulterer i et "glimt av usynlig tekst" (FOIT). Andre kan vise reserveskrifttyper i utgangspunktet, noe som forårsaker et "glimt av ustylet tekst" (FOUT).
• Brukeropplevelse: Inkonsekvent eller forsinket gjengivelse av skrifttyper kan forstyrre brukeropplevelsen og skape en forstyrrende effekt, spesielt på nettsteder med rik typografi.
• Tilgjengelighet: Riktig implementerte webskrifttyper er avgjørende for tilgjengelighet, og sikrer at brukere med synshemninger kan lese innhold komfortabelt.

Introduksjon til Web Fonts API

Web Fonts API (også kjent som Font Loading API) er et sett med JavaScript-grensesnitt som lar utviklere programmatisk kontrollere innlasting og gjengivelse av webskrifttyper. Det gir finkornet kontroll over hendelser knyttet til skriftinnlasting, noe som gjør det mulig for utviklere å implementere sofistikerte strategier for skriftinnlasting og optimalisere ytelsen. Kjernegrensesnittet er FontFace-grensesnittet.

Nøkkelfunksjoner i Web Fonts API inkluderer:

• Dynamisk skriftinnlasting: Last inn skrifttyper ved behov, kun når de trengs, og reduser den opprinnelige lastetiden for siden.
• Hendelser for skriftinnlasting: Lytt etter hendelser for skriftinnlasting (f.eks. loading, loadingdone, loadingerror) for å implementere egendefinerte lasteindikatorer eller reservestrategier.
• Konstruksjon av Font Face: Opprett FontFace-objekter for å definere egendefinerte skriftsnitt og bruke dem dynamisk på elementer.
• Kontroll over skriftaktivering: Kontroller når skrifttyper aktiveres og brukes på dokumentet.

Bruk av FontFace-grensesnittet

FontFace-grensesnittet er den sentrale komponenten i Web Fonts API. Det lar deg opprette skriftsnittobjekter fra ulike kilder, som URL-er, ArrayBuffers eller til og med SVG-skrifttyper. Her er et grunnleggende eksempel på hvordan du oppretter et FontFace-objekt fra en URL:

            const font = new FontFace('MyCustomFont', 'url(/fonts/MyCustomFont.woff2)');

font.load().then(function(loaded_face) {
  document.fonts.add(loaded_face);
  document.body.style.fontFamily = 'MyCustomFont, serif'; // Bruk skrifttypen
}).catch(function(error) {
  console.error('Innlasting av skrifttype feilet:', error);
});

            

              
                Copy
              
            
          

La oss bryte ned denne kodebiten:

1. new FontFace('MyCustomFont', 'url(/fonts/MyCustomFont.woff2)'): Dette oppretter et nytt FontFace-objekt med skriftfamilienavnet 'MyCustomFont' og URL-en til skriftfilen. Det første argumentet er navnet på skriftfamilien du vil bruke i CSS-en din. Det andre argumentet spesifiserer plasseringen av skriftfilen.
2. font.load(): Dette starter prosessen med å laste inn skrifttypen. Det returnerer et promise som løses når skrifttypen er vellykket lastet og dekodet, eller avvises hvis det oppstår en feil.
3. .then(function(loaded_face) { ... }): Dette håndterer vellykket innlasting av skrifttypen. Inne i tilbakekallingsfunksjonen utfører vi følgende trinn:
• document.fonts.add(loaded_face): Dette legger til det lastede skriftsnittet i dokumentets skriftliste, slik at det blir tilgjengelig for bruk. Dette er et avgjørende skritt.
• document.body.style.fontFamily = 'MyCustomFont, serif': Dette bruker den egendefinerte skrifttypen på body-elementet. Vi spesifiserer også en reserveskrifttype (serif) i tilfelle den egendefinerte skrifttypen ikke lastes inn.
4. .catch(function(error) { ... }): Dette håndterer eventuelle feil som oppstår under skriftinnlasting. Inne i tilbakekallingsfunksjonen logger vi feilen til konsollen for feilsøkingsformål.

Utnytte hendelser for skriftinnlasting

Web Fonts API tilbyr flere hendelser for skriftinnlasting som du kan lytte etter for å implementere egendefinerte lasteindikatorer eller reservestrategier. Disse hendelsene inkluderer:

• loading: Utløses når prosessen med å laste inn skrifttypen starter.
• loadingdone: Utløses når skrifttypen er vellykket lastet.
• loadingerror: Utløses når det oppstår en feil under skriftinnlasting.

Du kan lytte etter disse hendelsene ved å bruke addEventListener-metoden på FontFace-objektet:

            font.addEventListener('loading', function() {
  console.log('Innlasting av skrifttype startet...');
  // Vis en lasteindikator
});

font.addEventListener('loadingdone', function() {
  console.log('Skrifttype lastet vellykket!');
  // Skjul lasteindikatoren
});

font.addEventListener('loadingerror', function(error) {
  console.error('Feil ved innlasting av skrifttype:', error);
  // Vis en feilmelding eller bruk en reserveskrifttype
});

            

              
                Copy
              
            
          

Implementering av egendefinerte strategier for skriftinnlasting

1. Prioriter kritiske skrifttyper

Identifiser skrifttypene som er essensielle for den første gjengivelsen av nettstedet ditt (f.eks. skrifttyper brukt i overskrifter og navigasjon). Last inn disse skrifttypene først, og utsett innlastingen av mindre kritiske skrifttyper til senere. Dette kan forbedre den opplevde ytelsen til nettstedet ditt betydelig.

            // Last inn kritiske skrifttyper
const criticalFont = new FontFace('CriticalFont', 'url(/fonts/CriticalFont.woff2)');
criticalFont.load().then(function(loaded_face) {
  document.fonts.add(loaded_face);
  // Bruk kritisk skrifttype på relevante elementer
  document.querySelector('h1').style.fontFamily = 'CriticalFont, sans-serif';
});

// Last inn ikke-kritiske skrifttyper senere
setTimeout(function() {
  const nonCriticalFont = new FontFace('NonCriticalFont', 'url(/fonts/NonCriticalFont.woff2)');
  nonCriticalFont.load().then(function(loaded_face) {
    document.fonts.add(loaded_face);
    // Bruk ikke-kritisk skrifttype på relevante elementer
    document.querySelector('p').style.fontFamily = 'NonCriticalFont, serif';
  });
}, 1000); // Forsink innlasting med 1 sekund

            

              
                Copy
              
            
          

2. Bruk reserveskrifttyper

Spesifiser alltid reserveskrifttyper i CSS-en din for å sikre at innholdet forblir lesbart selv om egendefinerte skrifttyper ikke lastes inn. Velg reserveskrifttyper som ligner i stil på dine egendefinerte skrifttyper for å minimere visuelle forstyrrelser. Vurder å bruke CSS-egenskapen `font-display` i kombinasjon med Web Fonts API for enda finere kontroll over gjengivelsesatferden for skrifttyper.

            body {
  font-family: 'MyCustomFont', 'Helvetica Neue', Arial, sans-serif;
}

            

              
                Copy
              
            
          

I dette eksemplet, hvis 'MyCustomFont' ikke lastes inn, vil nettleseren falle tilbake på 'Helvetica Neue', deretter 'Arial', og til slutt 'sans-serif'.

3. Implementer en lasteindikator

Gi visuell tilbakemelding til brukere mens skrifttyper lastes inn. Dette kan være en enkel lastesnurr eller en mer sofistikert fremdriftslinje. Dette bidrar til å håndtere brukernes forventninger og forhindrer at de tror siden er ødelagt.

            // Vis lasteindikator
const loadingIndicator = document.getElementById('loading-indicator');
loadingIndicator.style.display = 'block';

font.addEventListener('loadingdone', function() {
  // Skjul lasteindikator
  loadingIndicator.style.display = 'none';
});

font.addEventListener('loadingerror', function() {
  // Skjul lasteindikator og vis en feilmelding
  loadingIndicator.style.display = 'none';
  // Vis feilmelding
});

            

              
                Copy
              
            
          

4. Optimaliser skriftfilformater

Bruk moderne skriftfilformater som WOFF2, som tilbyr overlegen komprimering sammenlignet med eldre formater som WOFF og TTF. WOFF2 er bredt støttet av moderne nettlesere og kan redusere skriftfilstørrelsene betydelig. Vurder å bruke et verktøy som Font Squirrel's Webfont Generator for å konvertere skrifttypene dine til WOFF2 og andre formater. Det gir også utmerkede CSS-kodesnutter for å hjelpe deg med å integrere skrifttypene på nettstedet ditt.

5. Utnytt font-subsetting

Font-subsetting innebærer å fjerne ubrukte tegn fra en skriftfil, noe som reduserer størrelsen. Dette er spesielt nyttig for nettsteder som bare krever et begrenset sett med tegn. For eksempel, hvis nettstedet ditt primært er på engelsk, kan du fjerne tegn som bare brukes i andre språk.

Flere verktøy er tilgjengelige for font-subsetting, inkludert:

• Font Squirrel Webfont Generator: Tilbyr et alternativ for subsetting under skriftkonvertering.
• Glyphhanger: Et kommandolinjeverktøy for å trekke ut brukte tegn fra HTML- og CSS-filer.
• FontForge: En gratis og åpen kildekode-skrifteditor som lar deg manuelt fjerne glyfer.

6. Vurder å bruke en font-CDN

Content Delivery Networks (CDN-er) kan hjelpe deg med å levere skrifttyper raskt og effektivt til brukere over hele verden. CDN-er bufrer skriftfiler på servere som er plassert i ulike geografiske regioner, noe som sikrer at brukere kan laste ned skrifttyper fra en server som er nær dem. Dette reduserer latens og forbedrer nedlastingshastighetene.

Populære font-CDN-er inkluderer:

• Google Fonts: En gratis og mye brukt font-CDN som er vert for en stor samling av åpen kildekode-skrifttyper.
• Adobe Fonts (tidligere Typekit): En abonnementsbasert skrifttjeneste som tilbyr et bredt utvalg av høykvalitetsskrifttyper.
• Fontdeck: En skrifttjeneste som lar deg være vert for dine egne skrifttyper på deres CDN.

7. Bufre skrifttyper effektivt

Konfigurer serveren din til å bufre skriftfiler på riktig måte. Dette vil tillate nettlesere å lagre skrifttyper lokalt og unngå å laste dem ned gjentatte ganger. Bruk passende cache-headere for å kontrollere hvor lenge skrifttyper bufres. En vanlig praksis er å sette en lang levetid for mellomlagring for skriftfiler som sannsynligvis ikke vil endres ofte.

8. Overvåk ytelsen til skriftinnlasting

Bruk nettleserens utviklerverktøy og verktøy for overvåking av nettstedytelse for å spore ytelsen til skriftinnlasting. Dette vil hjelpe deg med å identifisere flaskehalser og forbedringsområder. Vær oppmerksom på beregninger som nedlastingstider for skrifttyper, gjengivelsestider og forekomsten av FOIT/FOUT-problemer.

CSS-egenskapen `font-display`

CSS-egenskapen `font-display` gir ytterligere kontroll over gjengivelsesatferden for skrifttyper. Den lar deg spesifisere hvordan nettleseren skal håndtere visningen av tekst mens en skrifttype lastes inn. `font-display`-egenskapen har flere verdier, hver med sine egne gjengivelseskarakteristikker:

• `auto`: Nettleseren bruker sin standardstrategi for skriftvisning. Dette tilsvarer vanligvis `block`.
• `block`: Nettleseren skjuler i utgangspunktet teksten til skrifttypen er lastet. Dette forhindrer FOUT, men kan resultere i FOIT.
• `swap`: Nettleseren viser teksten umiddelbart ved hjelp av en reserveskrifttype. Når den egendefinerte skrifttypen er lastet, bytter nettleseren ut reserveskrifttypen med den egendefinerte skrifttypen. Dette forhindrer FOIT, men kan resultere i FOUT.
• `fallback`: Nettleseren skjuler i utgangspunktet teksten i en kort periode (vanligvis 100 ms). Hvis skrifttypen ikke er lastet innenfor denne perioden, viser nettleseren teksten ved hjelp av en reserveskrifttype. Når den egendefinerte skrifttypen er lastet, bytter nettleseren ut reserveskrifttypen med den egendefinerte skrifttypen. Dette gir en balanse mellom å forhindre FOIT og minimere FOUT.
• `optional`: Nettleseren viser teksten ved hjelp av en reserveskrifttype. Nettleseren kan velge å laste ned og bruke den egendefinerte skrifttypen hvis den er tilgjengelig, men det er ikke garantert. Dette er nyttig for skrifttyper som ikke er essensielle for den første gjengivelsen av siden.

Du kan bruke `font-display`-egenskapen i CSS-reglene dine:

            @font-face {
  font-family: 'MyCustomFont';
  src: url('/fonts/MyCustomFont.woff2') format('woff2');
  font-display: swap;
}

            

              
                Copy
              
            
          

Velg den `font-display`-verdien som passer best for nettstedets behov og mål for brukeropplevelse. Vurder avveiningene mellom FOIT og FOUT og velg verdien som gir den mest akseptable balansen.

Eksempler fra den virkelige verden og casestudier

La oss se på noen eksempler fra den virkelige verden på hvordan Web Fonts API kan brukes til å optimalisere skriftinnlasting og forbedre brukeropplevelsen.

1. E-handelsnettsted

Et e-handelsnettsted kan bruke Web Fonts API til å prioritere innlasting av skrifttyper som brukes i produkttitler og -beskrivelser. Ved å laste disse skrifttypene først, kan nettstedet sikre at brukere raskt kan se produktinformasjon. Nettstedet kan også implementere en lasteindikator for å gi visuell tilbakemelding mens andre skrifttyper lastes inn. Verdien `font-display: swap` kan brukes for å unngå å blokkere gjengivelse samtidig som det sikres at de riktige skrifttypene til slutt vises.

2. Nyhetsnettsted

Et nyhetsnettsted kan bruke Web Fonts API til å laste inn skrifttyper asynkront, slik at de ikke blokkerer den første gjengivelsen av siden. Dette kan forbedre den opplevde ytelsen til nettstedet og redusere fluktfrekvensen. Nettstedet kan også bruke font-subsetting for å redusere størrelsen på skriftfiler og forbedre nedlastingshastighetene. Verdien `font-display: fallback` ville være passende i dette scenariet.

3. Porteføljenettsted

Et porteføljenettsted kan bruke Web Fonts API til å laste inn egendefinerte skrifttyper ved behov, kun når de trengs. Dette kan redusere den opprinnelige lastetiden for siden og forbedre den generelle brukeropplevelsen. Nettstedet kan også bruke skriftbufring for å sikre at skrifttyper lastes raskt ved påfølgende besøk. Hvis de egendefinerte skrifttypene er rent dekorative og ikke-essensielle, kan `font-display: optional` være det beste valget.

Globale hensyn for optimalisering av webskrifttyper

Når du optimaliserer webskrifttyper for et globalt publikum, bør du vurdere følgende faktorer:

• Språkstøtte: Sørg for at skrifttypene dine støtter språkene som brukes på nettstedet ditt. Bruk Unicode-skrifttyper som inkluderer glyfer for et bredt spekter av tegn. Vurder å bruke separate skriftfiler for forskjellige språk eller regioner for å redusere filstørrelser.
• Regionale preferanser: Vær oppmerksom på regionale skriftpreferanser og designkonvensjoner. For eksempel kan noen regioner foretrekke sans-serif-skrifttyper, mens andre kan foretrekke serif-skrifttyper. Undersøk målgruppen og velg skrifttyper som er passende for deres kulturelle kontekst.
• Nettverksforhold: Optimaliser skriftinnlasting for brukere med trege eller upålitelige nettverksforbindelser. Bruk font-subsetting, komprimering og bufring for å minimere skriftfilstørrelser. Vurder å bruke en font-CDN for å levere skrifttyper fra servere som er plassert i ulike geografiske regioner.
• Tilgjengelighet: Sørg for at skrifttypene dine er tilgjengelige for brukere med nedsatt funksjonsevne. Bruk passende skriftstørrelser, linjehøyder og fargekontraster. Gi alternativ tekst for bilder og ikoner som bruker egendefinerte skrifttyper.
• Lisensiering: Vær oppmerksom på lisensvilkårene for skrifttypene du bruker. Sørg for at du har de nødvendige lisensene for å bruke skrifttypene på nettstedet ditt og i dine målregioner. Noen skriftlisenser kan begrense bruken i visse land eller til visse formål.

Feilsøking av vanlige problemer med skriftinnlasting

Her er noen vanlige problemer med skriftinnlasting og hvordan du kan feilsøke dem:

• FOIT (Flash of Invisible Text): Dette skjer når nettleseren skjuler teksten til skrifttypen er lastet. For å forhindre FOIT, bruk egenskapen `font-display: swap` eller `font-display: fallback`.
• FOUT (Flash of Unstyled Text): Dette skjer når nettleseren viser teksten med en reserveskrifttype til den egendefinerte skrifttypen er lastet. For å minimere FOUT, velg reserveskrifttyper som ligner i stil på dine egendefinerte skrifttyper. Vurder også tilnærmingen `font-display: optional` for ikke-kritiske skrifttyper.
• Skrifttype lastes ikke: Dette kan skyldes en rekke faktorer, som feil URL-er for skrifttyper, problemer med serverkonfigurasjon eller kompatibilitetsproblemer med nettleseren. Sjekk nettleserens utviklerverktøy for feilmeldinger og sørg for at skriftfilene er tilgjengelige.
• CORS-problemer: Hvis skriftfilene dine er vert på et annet domene, kan du støte på CORS (Cross-Origin Resource Sharing)-problemer. Sørg for at serveren din er konfigurert til å tillate kryss-opprinnelse-forespørsler for skriftfiler.
• Problemer med skriftgjengivelse: Problemer med skriftgjengivelse kan skyldes en rekke faktorer, som problemer med font-hinting, feil i nettleserens gjengivelse eller feil CSS-innstillinger. Prøv å eksperimentere med forskjellige innstillinger for skriftgjengivelse eller bruk en annen skrifttype.

Konklusjon

Ytterligere ressurser

• MDN Web Docs: FontFace
• CSS Fonts Module Level 4: FontFace Interface
• Google Fonts
• Adobe Fonts
• Font Squirrel Webfont Generator