Skrifttypebrug er udbredt på de fleste websider og inkluderer ofte fejl. Mange af disse fejl har en negativ indvirkning på web-ydelsesbudgettet. Denne artikel har til formål at give oplysninger om brug af webskrifttyper og hjælpe med at forbedre din webydeevne.
Som vist i hierarkiet anvendt ved gengivelse af enhver webside, kan skrifttypeelementer forsinke gengivelsen af andre elementer, indtil de er indlæst. Korrekt styring af denne forsinkelse er vigtig for både Cumulative Layout Shift (CLS) og brugeropfattelsen.
Problemet med skrifttypeindlæsning
Indtil sidens skrifttyper er indlæst, varierer synligheden af skrifttyper under HTML- og CSS-gengivelsesprocessen fra browser til browser. Her er en oversigt over, hvordan forskellige browsere håndterer denne situation:
| browser | Standardadfærd, hvis skrifttypen ikke er klar... |
|---|---|
| Edge | Bruger en systemskrifttype, indtil skrifttypen er klar. Bytter skrifttype ud. |
| Chrome | Skjuler tekst i op til 3 sekunder. Hvis teksten stadig ikke er klar, bruger du en systemskrifttype, indtil skrifttypen er klar. Bytter skrifttype ud. |
| Firefox | Skjuler tekst i op til 3 sekunder. Hvis teksten stadig ikke er klar, bruger du en systemskrifttype, indtil skrifttypen er klar. Bytter skrifttype ud. |
| Safari | Skjuler tekst, indtil skrifttypen er klar. |
For at løse dette problem uden at stole på om browseradfærd, blev font-display-parameteren introduceret. I øjeblikket understøtter 92 % af browsere parameteren font-display.
Hvad gør Font-Display?
Under sideindlæsningsprocessen kan udseendet af skrifttyper variere, indtil de er fuldt indlæst, afhængigt af browseren. For eksempel skjuler nogle versioner af Safari-browseren teksten, indtil skrifttypen er indlæst. Det font-display: swap CSS-parameteren standardiserer denne adfærd ved at vise teksten ved hjælp af en systemskrifttype, indtil skrifttypefilerne er indlæst. Når skrifttyperne er indlæst, skiftes systemskrifttypen ud med den tilsigtede skrifttype. Her er et eksempel på brug:
@font-face {
font-family: 'Awesome Font';
font-style: normal;
font-weight: 400;
font-display: swap;
}Forudindlæsning af skrifttyper
Ved brug af at indlæse skrifttyper før den kritiske gengivelsessti kan forhindre huller, mens skrifttyper indlæses.
BONUS: Industriens tilgang til skrifttypebrug
Ifølge SimilarTech-data, lad os tage et kig på en vigtig trend og et øjebliksbillede af internetverdenen. Den første graf nedenfor viser skrifttypebrug på de øverste 10,000 sider, og den anden graf viser skrifttypebrug på de øverste 100,000 websteder. Lad os først undersøge disse grafer:
Der er en forskel på 5 % i brugen af Google Font og Font Awesome mellem de 10,000 bedste websteder og de 100,000 bedste websteder. Dette fortæller os, at de 10,000 bedste websteder har optimeret deres skrifttypebrug. Vi anbefaler at undersøge dette som et bemærkelsesværdigt emne. Overvej, hvordan du kan implementere webskrifttyper med dine egne løsninger.
BONUS 2: Brugsstatistik for Google Font og Font Awesome
Med henvisning til den første bonus foreslår vi at undersøge de to grafer, der viser det numeriske omfang af de mest brugte skrifttypebiblioteker. Antallet af unikke domæner her overstiger millioner, og disse millioner repræsenterer dine SEO-konkurrenter. At bruge disse biblioteker bedre og mere optimalt end andre kan hjælpe dig med at skille dig ud.
Ved at følge disse tips og optimere dit skrifttypeforbrug kan du forbedre din webydeevne og brugeroplevelse markant.
