Slik bruker du webfonter

Sep 12, 2025

hvordan

[1. 3]

Følgende er et utdrag tatt fra Bram Stein's Webfont Handbook. Kjøp det her .

Webfonter er definert i CSS gjennom @ font-face regel. Hvis du er en webutvikler, har du mest sannsynlig skrevet, kopiert og limt inn, eller i det minste sett en @ font-face regel.

For fullstendigheten, skjønt, la oss raskt løpe gjennom et grunnleggende eksempel:

 @ font-face {
  Font-familie: Elena;
  SRC: URL (Elena-Regular.Woff);
}

Dette skaper en ny web font familie som kan refereres gjennom font-familie eller font. Shorthand eiendom. Men noe mangler her. Når du refererer til en web-font i en skriftstabel, må du alltid sørge for å inkludere minst en tilbakestillingsfont i tilfelle webfonten ikke lastes inn.

Her, hvis Elena ikke laster, vil nettleseren falle tilbake på generisk serif. Font familie:

 p {
  Font-familie: Elena, Serif;
}

Det er mer til Fallback Fonts, men for nå, la oss holde vår skriftstabel enkel ved å inkludere bare generisk serif. og sans serif font familier.

Font familier

Opprette en skriftfamilie med flere stiler oppnås ved å skape en @ font-face Regel for hver stil og bruk det samme font-familie Navn. Følgende @ font-face Regler Opprett en familie med en vanlig og dristig stil:

 @ font-face {
     Font-familie: Elena;
     SRC: URL (Elena-Regular.Woff);
     font-vekt: normal;
}
   @ font-face {
     Font-familie: Elena;
     SRC: URL (Elena-Bold.Woff);
     font-vekt: fet;
}

Du kan bruke denne skriftfamilien i CSS ved å referere til familienavnet og vekten i selektørene dine. Dette gjelder vanlig stil til avsnittene og den dristige stilen til sterk avsnitt:

 p {
  Font-familie: Elena, Serif;
}

p sterk {
  font-vekt: fet;
}

I tillegg font-vekt , @ font-face aksepterer også den fontstil og font-strekk Eiendoms descriptors, som definerer stiler som kursiv og kondensert. Alle tre eiendomsbeskrivelsene kan brukes til å lage en enkelt skrifttypefamilie med flere stiler. Teoretisk sett lar dette deg lage en familie som inneholder 243 individuelle stiler (ni font-vekt Verdier × Tre fontstil Verdier × Ni. font-strekk verdier).

I praksis er det imidlertid begrenset til 27 verdier, siden noen nettlesere ikke støtter font-strekk . Ta en titt på bordet nedenfor for å se hvilke nettlesere du kan bruke, og se her for mer detaljert informasjon.

Click the icon in the top right to enlarge the image — Klikk på ikonet øverst til høyre for å forstørre bildet

Med flaks vil de resterende nettleserne implementere font-strekk Eiendom snart, og du vil kunne bruke alle 243 font klassifikasjoner.

Font formater

De src. Beskrivelsen forteller en nettleser hvor du skal få en skriftfil. De forrige eksemplene brukte et enkelt skriftformat, men du vil ofte se nettadresser til flere skriftformater kombinert med formathint, som er lagt etter at nettadressen bruker format ("verdi") syntaks.

Format Hints Fortell nettleseren Hva formatet på skriftfilen på en gitt nettadresse er.

 @ font-face {
  Font-familie: Elena;
  SRC: URL (Elena-Regular.woff2) format ("Woff2"),
       URL (Elena-Regular.woff) format ("voff");
}

Hvis du lister flere formater, velger moderne nettlesere det første formatet de støtter basert på formatet. Derfor er det viktig å liste web font formater i rekkefølgen av beste komprimering i det minste.

Selv om format hint er valgfritt, må du alltid inkludere dem - de lar nettleseren vite om formatet uten å måtte laste ned fonten. For eksempel, hvis en nettleser ikke støtter Woff2, men støtter WOFF, kan det hoppe over Woff2-fontfilen basert på formatet.

Nettlesere støtter flere web font formater: OpenType (TrueType), EOT, WOFF og WOFF2. Noen nettlesere støtter også SVG-fonter, men de blir utdatert og bør ikke lenger brukes (og bør ikke forveksles med Nytt OpenType-SVG-format ).

EOT, WOFF, og WOFF2 er teknisk ikke fontformater. De er komprimerte OpenType-filer med varierende grad av komprimering. Woff2 tilbyr den beste kompresjonen, etterfulgt av Woff og Eot.

Ved forsker dekning for alle nettlesere, kan du ha kommet over noe som heter skuddsikker @ font-face syntaks av fontspring.

Bulletproof syntaksen bruker EOT, WOFF2, WOFF, RAW OPENTYPE og SVG-skriftfiler for maksimal nettleserdekning:

 @ font-face {
  Font-familie: Elena;
  SRC: URL (elena.eot? #iefix) format ("Embedded-OpenType"),
       URL (elena.woff2) format ("woff2"),
       URL (elena.woff) format ("woff"),
       URL (elena.otf) format ("OpenType"),
       URL (Elena.svg # Elena) format ("SVG");
}

Den første nettadressen kan se litt merkelig ut til deg. Versjoner av Internet Explorer 8 og nedenfor støtter ikke syntaksen for flere skriftformater, og behandle hele verdien av src. eiendom som nettadressen.

The Bulletproof Syntax Tricks Internet Explorer 8 og under til å tenke at de gjenværende nettadressene er en del av fragmentidentifikatoren til den første nettadressen. Fordi fragmentidentifikatorer blir ignorert når du laster ned filer, bruker Internet Explorer 8 og under bare den første nettadressen.

Nettlesere andre enn Internet Explorer vil hoppe over linjen fordi de ikke støtter EOT.

Resten av oppføringene er det du forventer: fontformater som er oppført i rekkefølge av preferanse.

Men er den bulletproof syntaksen fortsatt relevant? Nei. Faktisk tror jeg det er skadelig. SVG-skrifter blir utdatert og støttes kun av nettlesere som ikke lenger er i bruk.

De fleste nettsteder støtter Internet Explorer 9 og opp, men syntaksen lister EOT som det første foretrukne skriftformatet. Selv om Internet Explorer 9 og Up Support Woff, vil disse versjonene fortsatt laste ned EOT-filen, bare fordi den er oppført først.

Fordi de fleste nettsteder ikke lenger støtter gamle nettlesere, anbefaler jeg sterkt at du bruker en forenklet syntaks. Denne forenklede syntaksen dekker alle moderne nettlesere, så vel som litt eldre som fortsatt er i aktiv bruk, for eksempel Android 4.4 og tidligere:

 @ font-face {
  Font-familie: Elena;
  SRC: URL (elena.woff2) format ("Woff2"),
       URL (elena.woff) format ("woff"),
       url (elena.otf) format ("OpenType");
}

Selv om eldre Android-versjoner fortsatt brukes, er Worldwide Reliance på disse nettleserne raskt svindende. Snart vil du sannsynligvis også kunne slippe det røde OpenType-formatet, og forenkle syntaxen enda lenger:

 @ font-face {
  Font-familie: Elena;
  SRC: URL (elena.woff2) format ("Woff2"),
       URL (elena.woff) format ("woff");
}

I dette tilfellet vil noen som kjører en eldre nettleser, bare se dine fallback-fonter i stedet for webfonten. Det er greit; De kan fortsatt lese innholdet i Fallback-skrifttypen.

Det er en annen mulig verdi for src. descriptor. De Lokal Funksjonen tar navnet på en lokal fontfamilie. Hvis fonten skjer som skal installeres på systemet, vil nettleseren bruke det i stedet, og dermed unngå en ekstra nedlasting.

 @ font-face {
  Font-familie: Elena;
  SRC: Lokal ("Elena"),
       URL (Elena-Regular.woff2) format ("Woff2"),
       URL (Elena-Regular.woff) format ("voff");
}

Selv om dette kan virke som en flott optimalisering, garanterer ingenting at den lokale fonten passer til webfonten din.

Du kan få en annen versjon av fonten, en skrift med forskjellig språkstøtte, eller til og med en helt annen skrift. Av den grunn anbefaler jeg vanligvis ikke å bruke Lokal Funksjon Med mindre du finner disse downsides akseptabelt.

Dette er et utdrag fra Bram Stein's Webfont Handbook. , fra en bok fra hverandre. I det utforsker han hva han skal vurdere når du velger webfonter, hvordan du bruker dem effektivt, og hvordan du optimaliserer for ytelse.

Relaterte artikler:

Hva i helvete er Blockchain?
30 Chrome-utvidelser for webdesignere og devs
20 fantastiske gratis Google webfonter

Slik bruker du webfonter

Font familier

Font formater

hvordan - Mest populære artikler

Krita Tutorials: Lær det grunnleggende om den digitale kunstprogramvaren

Hvordan endre fonten i Twitter Bio

Lag en kromatisk aberreringseffekt

Hvordan komme i gang med Sass

11 tips for å skape et vannaktig landskap i 3D

Lag en dobbel eksponering i Photoshop

Hvordan ta vektorlogoen din fra 2D til 3D

Hvordan kombinere skulpturerte og malte forskyvningskart

Kategorier