CSS Font Face: Brugerdefinerede strategier for skrifttypeindlæsning og -optimering til globalt webdesign

Typografi spiller en afgørende rolle i webdesign, da den former brugeroplevelsen og formidler dit brands identitet. @font-face-reglen i CSS giver udviklere mulighed for at integrere brugerdefinerede skrifttyper direkte på deres websites, hvilket giver større kontrol over den visuelle præsentation af tekst og muliggør en mere unik og engagerende brugeroplevelse. Dog kan forkert implementering føre til performanceproblemer, som påvirker indlæsningstider for websites og har en negativ indvirkning på brugertilfredsheden, især for brugere i regioner med langsommere internetforbindelser.

Denne omfattende guide udforsker finesserne ved @font-face og dækker bedste praksis for indlæsning af brugerdefinerede skrifttyper samt optimeringsstrategier for at sikre en problemfri og effektiv oplevelse for et globalt publikum. Vi vil dykke ned i forskellige skrifttypeformater, optimeringsteknikker og avancerede funktioner for at hjælpe dig med at mestre kunsten af webtypografi.

Forståelse af @font-face-reglen

@font-face-reglen er en kraftfuld CSS at-regel, der giver dig mulighed for at specificere brugerdefinerede skrifttypefiler, som skal downloades og bruges på dit website. Den bygger bro mellem det begrænsede sæt af systemskrifttyper og den enorme verden af brugerdefineret typografi.

Her er den grundlæggende syntaks:

            @font-face {
  font-family: 'MyCustomFont';
  src: url('mycustomfont.woff2') format('woff2'),
       url('mycustomfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
            

              
                Copy
              
            
          

Lad os gennemgå komponenterne:

• font-family: Denne egenskab definerer navnet, du vil bruge til at henvise til den brugerdefinerede skrifttype i dine CSS-regler. Vælg et beskrivende og unikt navn.
• src: Denne egenskab specificerer placeringen af skrifttypefilerne. Du kan angive flere kilder, hvilket giver browseren mulighed for at vælge det optimale format baseret på dens kapaciteter. format()-funktionen angiver skrifttypeformatet for hver fil.
• font-weight: Denne egenskab definerer skrifttypens vægt (fed). Almindelige værdier inkluderer normal, bold, lighter, bolder og numeriske værdier som 100, 400, 700, osv.
• font-style: Denne egenskab definerer skrifttypens stil (f.eks. normal, italic, oblique).

Når den er defineret, kan du bruge den brugerdefinerede skrifttype i dine CSS-regler således:

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

              
                Copy
              
            
          

Dette vil anvende 'MyCustomFont' på hele body-elementet på dit website. sans-serif er en fallback-skrifttype, der vil blive brugt, hvis den brugerdefinerede skrifttype ikke kan indlæses.

Valg af de rigtige skrifttypeformater: Et globalt perspektiv

Forskellige browsere understøtter forskellige skrifttypeformater. For at sikre bred kompatibilitet er det afgørende at levere dine skrifttyper i flere formater. Her er en oversigt over almindelige skrifttypeformater og deres browserunderstøttelse:

• WOFF2 (Web Open Font Format 2): Det mest moderne og stærkt anbefalede format, der tilbyder overlegen komprimering og ydeevne. Understøttes af alle moderne browsere.
• WOFF (Web Open Font Format): Et bredt understøttet format, der tilbyder god komprimering. Stadig relevant for ældre browsere.
• EOT (Embedded Open Type): Specielt designet til Internet Explorer. Generelt ikke nødvendigt længere, medmindre du absolut skal understøtte meget gamle versioner af IE.
• TTF (TrueType Font) / OTF (OpenType Font): Ældre formater, der generelt er større i filstørrelse og mindre optimerede til webbrug. Undgå at bruge disse direkte, når det er muligt.
• SVG Fonts: Et ældre format, som ikke bruges ofte i dag på grund af browserunderstøttelse og andre begrænsninger.

Anbefaling: Brug WOFF2 som dit primære format, og tilbyd WOFF som en fallback for ældre browsere. Overvej kun EOT, hvis du skal understøtte meget gamle versioner af Internet Explorer.

Her er et eksempel på, hvordan du angiver flere skrifttypeformater i din @font-face-regel:

            @font-face {
  font-family: 'MyCustomFont';
  src: url('mycustomfont.woff2') format('woff2'),
       url('mycustomfont.woff') format('woff'),
       url('mycustomfont.eot') format('embedded-opentype'); /* Til ældre IE */
  font-weight: normal;
  font-style: normal;
}
            

              
                Copy
              
            
          

Strategier for skrifttypeindlæsning: Optimering for hastighed og brugeroplevelse

Måden, du indlæser dine skrifttyper på, kan have en betydelig indvirkning på dit websites ydeevne. Her er flere strategier for skrifttypeindlæsning, du kan anvende:

1. Grundlæggende skrifttypeindlæsning (standardadfærd)

Som standard vil browsere typisk blokere gengivelsen af tekst, indtil skrifttypen er downloadet. Dette kan føre til en opfattet performance-flaskehals, hvor brugere ser en blank skærm eller usynlig tekst i en kort periode (ofte kaldet et "flash of invisible text" eller FOIT).

Selvom denne tilgang er enkel at implementere, anbefales den generelt ikke for en optimal brugeroplevelse.

2. Brug af font-display-egenskaben

font-display-egenskaben giver mere kontrol over, hvordan skrifttyper indlæses og vises. Den giver dig mulighed for at tilpasse adfærden under skrifttypeindlæsningen, hvilket giver en mere glidende oplevelse for dine brugere. Dette er den anbefalede tilgang i de fleste situationer.

Her er de mulige værdier for font-display:

• auto: Browseren bruger sin standardstrategi for skrifttypeindlæsning (typisk FOIT).
• block: Giver skrifttypen en kort blokeringsperiode og en uendelig udskiftningsperiode. Browseren skjuler teksten i starten og viser den derefter, når skrifttypen er indlæst. Hvis skrifttypen ikke indlæses inden for en kort periode (typisk 3 sekunder), vises fallback-skrifttypen.
• swap: Giver skrifttypen en nul-blokeringsperiode og en uendelig udskiftningsperiode. Browseren viser teksten med det samme ved hjælp af en fallback-skrifttype. Når den brugerdefinerede skrifttype er indlæst, udskiftes teksten til den brugerdefinerede skrifttype. Dette undgår FOIT, men kan resultere i et "flash of unstyled text" (FOUT).
• fallback: Giver skrifttypen en meget kort blokeringsperiode og en kort udskiftningsperiode. Dette er et kompromis mellem block og swap. Browseren skjuler teksten i en meget kort periode og skifter derefter til fallback-skrifttypen, hvis den brugerdefinerede skrifttype ikke er indlæst. Den fortsætter med at udskifte skrifttyper i en kort periode, hvorefter den stopper og blot bruger fallback-skrifttypen.
• optional: Giver skrifttypen en ekstremt kort blokeringsperiode og ingen udskiftningsperiode. Nyttigt for skrifttyper, der ikke er kritiske for den indledende gengivelse af siden (f.eks. skrifttyper brugt i ikke-essentielle UI-elementer).

Anbefalinger:

• For de fleste scenarier giver swap den bedste balance mellem opfattet ydeevne og visuel stabilitet. Brugere ser tekst med det samme, selvom den i starten er stylet med en fallback-skrifttype.
• Brug fallback, hvis du vil minimere FOUT, men stadig prioriterer den brugerdefinerede skrifttype.
• Brug optional til ikke-kritiske skrifttyper for at forhindre unødvendig blokering af sidens gengivelse.

Eksempel på brug af font-display: swap:

            @font-face {
  font-family: 'MyCustomFont';
  src: url('mycustomfont.woff2') format('woff2'),
       url('mycustomfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
            

              
                Copy
              
            
          

3. Forudindlæsning af skrifttyper

Forudindlæsning af skrifttyper kan forbedre ydeevnen ved at instruere browseren i at downloade skrifttypefilerne så tidligt som muligt. Dette kan reducere forsinkelsen forbundet med skrifttypeindlæsning, hvilket resulterer i en hurtigere opfattet indlæsningstid.

Brug <link rel="preload">-tagget i <head>-sektionen af dit HTML-dokument for at forudindlæse skrifttyper:

            <link rel="preload" href="mycustomfont.woff2" as="font" type="font/woff2" crossorigin>
            

              
                Copy
              
            
          

Forklaring:

• rel="preload": Angiver, at ressourcen skal forudindlæses.
• href: Angiver URL'en til skrifttypefilen.
• as="font": Angiver typen af ressource, der forudindlæses (i dette tilfælde en skrifttype).
• type="font/woff2": Angiver MIME-typen for skrifttypefilen.
• crossorigin: Påkrævet, hvis skrifttypen indlæses fra en anden oprindelse (f.eks. en CDN).

Advarsel: Forudindlæsning af for mange ressourcer kan påvirke ydeevnen negativt. Forudindlæs kun skrifttyper, der er kritiske for den indledende gengivelse af siden.

4. Font Loading API (Avanceret)

Font Loading API giver et mere detaljeret kontrolniveau over skrifttypeindlæsning. Det giver dig mulighed for at registrere, hvornår en skrifttype er indlæst, spore indlæsningsfremskridt og håndtere fejl. Dette kan være nyttigt til implementering af mere sofistikerede strategier for skrifttypeindlæsning.

Eksempel (JavaScript):

            document.fonts.load('1em MyCustomFont').then(function() {
  // Skrifttypen er indlæst korrekt
  console.log('MyCustomFont indlæst!');
});
            

              
                Copy
              
            
          

Font Loading API er mere komplekst at bruge end font-display-egenskaben, men det giver større fleksibilitet til avancerede anvendelsestilfælde.

Optimering af skrifttypefiler: Reducering af størrelse og forbedring af ydeevne

Optimering af dine skrifttypefiler er afgørende for at forbedre website-ydeevnen og reducere indlæsningstider. Her er flere teknikker, du kan bruge:

1. Font Subsetting

De fleste skrifttyper indeholder et stort antal glyffer (tegn), hvoraf mange måske ikke bruges på dit website. Font subsetting involverer at fjerne ubrugte glyffer fra skrifttypefilen, hvilket reducerer dens størrelse betydeligt. Dette er især vigtigt, når man understøtter flere sprog, da skrifttyper kan indeholde glyffer for tegn, der ikke bruges i en bestemt region.

Fordele:

• Mindre skrifttypefilstørrelse
• Hurtigere downloadtider
• Forbedret website-ydeevne

Værktøjer til Font Subsetting:

• FontForge (Open Source): En kraftfuld desktop skrifttypeeditor, der giver dig mulighed for manuelt at subsette skrifttyper.
• Glyphhanger (Kommandolinje): Et kommandolinjeværktøj, der identificerer ubrugte glyffer og opretter subsets.
• Online Font Subsetting Værktøjer: Der findes flere online værktøjer til at subsette skrifttyper, såsom Font Squirrel's Webfont Generator.

Unicode-range

For flersprogede sites kan unicode-range CSS-descriptoren bruges til at specificere, hvilke Unicode-tegnområder skrifttypen skal bruges til. Dette gør det muligt for browseren kun at downloade de nødvendige dele af skrifttypen, hvilket forbedrer ydeevnen. Dette er især nyttigt, når man arbejder med sprog med store tegnsæt som kinesisk, japansk og koreansk (CJK).

Eksempel:

            @font-face {
  font-family: 'NotoSansCJK';
  src: url('NotoSansCJK-Regular.woff2') format('woff2');
  unicode-range: U+4E00-9FFF, /* Almindelige CJK Unified Ideographs */
                 U+3040-309F, /* Hiragana */
                 U+30A0-30FF;  /* Katakana */
  font-weight: normal;
  font-style: normal;
}
            

              
                Copy
              
            
          

2. Komprimering

Sørg for, at dine skrifttypefiler er korrekt komprimeret ved hjælp af Gzip eller Brotli. De fleste webservere understøtter disse komprimeringsalgoritmer, som kan reducere størrelsen af skrifttypefilerne betydeligt under overførslen.

Fordele:

• Mindre filstørrelse under overførsel
• Hurtigere downloadtider

3. Optimering af SVG-skrifttyper

Hvis du bruger SVG-skrifttyper (selvom det generelt ikke anbefales), skal du optimere SVG-filerne med værktøjer som SVGO (SVG Optimizer) for at fjerne unødvendig metadata og reducere filstørrelsen.

4. Variable skrifttyper

Variable skrifttyper er en relativt ny skrifttypeteknologi, der gør det muligt for en enkelt skrifttypefil at indeholde flere variationer af en skrifttype, såsom forskellige vægte, bredder og stilarter. Dette kan reducere den samlede filstørrelse betydeligt sammenlignet med at bruge separate skrifttypefiler for hver variation.

Fordele:

• Mindre filstørrelser sammenlignet med traditionelle skrifttypeformater, når der bruges flere variationer
• Større designfleksibilitet

5. Caching

Konfigurer din webserver til korrekt at cache skrifttypefiler. Dette giver browsere mulighed for at gemme skrifttypefilerne lokalt, hvilket reducerer behovet for at downloade dem gentagne gange ved efterfølgende besøg.

Fordele:

• Hurtigere indlæsningstider for tilbagevendende besøgende
• Reduceret serverbelastning

Overvejelser om tilgængelighed

Når du bruger brugerdefinerede skrifttyper, er det vigtigt at overveje tilgængelighed for at sikre, at dit website kan bruges af alle, inklusive personer med handicap.

1. Tilstrækkelig kontrast

Sørg for, at tekstfarven giver tilstrækkelig kontrast mod baggrundsfarven for at opfylde WCAG (Web Content Accessibility Guidelines) standarder. Brug et kontrastkontrolværktøj til at verificere, at kontrastforholdet er tilstrækkeligt.

2. Læselig skriftstørrelse

Brug en skriftstørrelse, der er stor nok til at være let læselig, især for brugere med synshandicap. Undgå at bruge overdrevent små skriftstørrelser.

3. Skriftvægt

Vælg en skriftvægt, der er let læselig. Undgå at bruge overdrevent tynde eller lette skrifttyper, da de kan være svære at læse for nogle brugere.

4. Fallback-skrifttyper

Angiv passende fallback-skrifttyper i dine CSS-regler for at sikre, at teksten stadig er læselig, selvom den brugerdefinerede skrifttype ikke kan indlæses. Vælg fallback-skrifttyper, der ligner den brugerdefinerede skrifttype i stil og udseende.

5. Ændring af tekststørrelse

Sørg for, at brugere let kan ændre størrelsen på teksten på dit website ved hjælp af browserzoom eller andre tilgængelighedsværktøjer. Undgå at bruge fastsatte enheder (f.eks. pixels) til skriftstørrelser. Brug i stedet relative enheder (f.eks. em, rem).

6. Sprogattributter

Indstil lang-attributten korrekt på <html>-tagget for at angive sidens sprog. Dette hjælper skærmlæsere og andre hjælpeteknologier med at gengive teksten korrekt.

Eksempel:

            <html lang="en">
  <head>
    <title>My Website</title>
  </head>
  <body>
    <p>This is some text in English.</p>
  </body>
</html>
            

              
                Copy
              
            
          

Cross-Browser-kompatibilitet

Sørg for, at dine brugerdefinerede skrifttyper er kompatible med en bred vifte af browsere. Test dit website på forskellige browsere og enheder for at identificere eventuelle kompatibilitetsproblemer. Brug værktøjer som BrowserStack eller Sauce Labs til at teste dit website på en række forskellige browsere og operativsystemer.

Overvej at bruge et CSS-reset-stylesheet (f.eks. Normalize.css) for at normalisere standardstilarterne på tværs af forskellige browsere.

Almindelige faldgruber at undgå

• Brug af for mange brugerdefinerede skrifttyper: Brug af for mange brugerdefinerede skrifttyper kan påvirke ydeevnen negativt og skabe en rodet visuel oplevelse. Begræns antallet af brugerdefinerede skrifttyper på dit website til maksimalt to eller tre.
• Brug af store skrifttypefiler: Store skrifttypefiler kan øge indlæsningstiderne betydeligt. Optimer dine skrifttypefiler ved hjælp af de teknikker, der er beskrevet ovenfor.
• Manglende angivelse af fallback-skrifttyper: Hvis du ikke angiver fallback-skrifttyper, kan det resultere i usynlig tekst, hvis den brugerdefinerede skrifttype ikke kan indlæses.
• Ignorering af tilgængelighedshensyn: Ignorering af tilgængelighedshensyn kan gøre dit website ubrugeligt for personer med handicap.
• Ikke at teste på forskellige browsere: Ikke at teste på forskellige browsere kan resultere i kompatibilitetsproblemer.
• Hotlinking af skrifttypefiler direkte fra designerens websted eller andre upålidelige kilder: Host kun skrifttyper fra dit eget website, CDN eller en velrenommeret skrifttypetjeneste.

Bedste praksis for global webtypografi

Når man designer websites for et globalt publikum, er det vigtigt at overveje følgende bedste praksis for webtypografi:

• Vælg skrifttyper, der understøtter flere sprog: Vælg skrifttyper, der inkluderer glyffer for de sprog, du har til hensigt at understøtte på dit website.
• Brug passende skriftstørrelser for forskellige sprog: Skriftstørrelser, der er egnede til ét sprog, er muligvis ikke egnede til et andet. Juster skriftstørrelser efter behov for at sikre læsbarhed på tværs af forskellige sprog.
• Overvej linjehøjde og tegnmellemrum: Linjehøjde og tegnmellemrum kan påvirke læsbarheden, især for sprog med komplekse tegnsæt. Juster disse værdier efter behov for at optimere læsbarheden.
• Brug passende tekstjustering: Den passende tekstjustering kan variere afhængigt af sproget. For eksempel bruger venstre-til-højre sprog typisk venstrejustering, mens højre-til-venstre sprog typisk bruger højrejustering.
• Test dit website med forskellige sprog: Test dit website med forskellige sprog for at sikre, at typografien ser korrekt ud og er let læselig.

Eksempel: Brug af en skrifttype med global tegnunderstøttelse

Overvej at bruge en skrifttype som Noto Sans, som er designet til at understøtte en bred vifte af sprog og skriftsystemer. Google tilbyder Noto Sans og dens mange varianter (Noto Sans CJK, Noto Sans Arabic, osv.) som en gratis webskrifttype.

Konklusion

At mestre CSS @font-face og implementere effektive strategier for skrifttypeindlæsning og -optimering er afgørende for at skabe performante og visuelt tiltalende websites for et globalt publikum. Ved at forstå nuancerne i skrifttypeformater, indlæsningsteknikker og optimeringsmetoder kan du levere en problemfri og engagerende brugeroplevelse, der overskrider geografiske grænser og kulturelle forskelle.

Ved at følge de bedste praksisser, der er beskrevet i denne guide, kan du sikre, at dit websites typografi forbedrer dets overordnede design, øger dets ydeevne og giver en tilgængelig oplevelse for alle brugere, uanset deres placering eller enhed.