Sådan bruger du Web Fonts

Sep 13, 2025

hvordan

Følgende er et uddrag taget fra Bram Steins Webfont Handbook. Køb det her .

Web skrifttyper er defineret i CSS gennem @ Font-Face Herske. Hvis du er en webudvikler, har du højst sandsynligt skrevet, kopieret og klistret eller i det mindste set en @ Font-Face Herske.

Af hensyn til fuldstændigheden, lad os dog hurtigt løbe gennem et grundlæggende eksempel:

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

Dette skaber en ny web font familie, der kan henvises til gennem Font-Family. eller skrifttype Shorthand ejendom. Men noget mangler her. Når du refererer til en web skrifttype i en skrifttype, skal du altid sørge for at inkludere mindst en tilbagekøbsbeskyttelse, hvis webfont ikke indlæses.

Her, hvis Elena undlader at indlæse, vil browseren falde tilbage på den generiske SERIF. Font familie:

 P {
  Font-familie: Elena, Serif;
}

Der er mere til Fallback skrifttyper, men for nu, lad os holde vores skrifttype stak simpelt ved kun at inkludere den generiske SERIF. og sans serif skrifttype familier.

Skrifttype familier.

Oprettelse af en skrifttypefamilie med flere stilarter opnås ved at skabe en @ Font-Face Regel for hver stil og bruger det samme Font-Family. navn. Det følgende @ Font-Face Regler skaber en familie med en normal og fed stil:

 @ font-face {
     Font-Family: Elena;
     SRC: URL (Elena-Regular.WOFF);
     FONT-VÆGT: NORMAL;
}
   @ font-face {
     Font-Family: Elena;
     SRC: URL (Elena-Bold.woff);
     Font-Vægt: Fed;
}

Du kan bruge denne skrifttype familie i dine CSS ved at henvise til familienavn og vægt i dine vælgere. Dette gælder den regelmæssige stil til afsnit og den dristige stil til stærk Afsnit:

 P {
  Font-familie: Elena, Serif;
}

p stærk {
  Font-Vægt: Fed;
}

Udover skrifttype-vægt Vi @ Font-Face accepterer også skrifttype og skrifttype-stretch. Ejendomsbeskrivelser, som definerer stilarter som kursiv og kondenseret. Alle tre ejendomsbeskrivelser kan bruges til at oprette en enkelt skrifttypefamilie med flere stilarter. Teoretisk giver dette dig mulighed for at oprette en familie indeholdende 243 individuelle stilarter (ni skrifttype-vægt Værdier × Tre. skrifttype Værdier × ni. skrifttype-stretch. værdier).

I praksis er du imidlertid begrænset til 27 værdier, da nogle browsere ikke understøtter skrifttype-stretch. . Tag et kig på nedenstående tabel for at se, hvilke browsere du kan bruge, og se her for mere detaljerede oplysninger.

Click the icon in the top right to enlarge the image — Klik på ikonet øverst for at forstørre billedet

Med held vil de resterende browsere implementere skrifttype-stretch. Ejendom snart, og du vil være i stand til at bruge alle 243 skrifttype klassifikationer.

Fontformats.

Det Src. Descriptor fortæller en browser, hvor du skal få en skrifttypefil. De foregående eksempler brugte et enkelt skrifttypeformat, men du vil ofte se webadresser til flere skrifttyperformater kombineret med formathints, som er vedhæftet efter webadressen ved hjælp af Format ("Value") syntaks.

Formathints Fortæl browseren, hvad formatet for skrifttypefilen på en given URL er.

 @ font-face {
  Font-Family: Elena;
  SRC: URL (Elena-Regular.WOFF2) format ("WOFF2"),
       URL (Elena-Regular.WOFF) format ("WOFF");
}

Hvis du angiver flere formater, vælger moderne browsere det første format, de understøtter baseret på formatets tip. Derfor er det vigtigt at liste web skrifttyperformater i størrelsesordenen den bedste kompression i det mindste.

Selvom formathints er valgfrit, skal du altid inkludere dem - de lader browseren vide om formatet uden at skulle downloade skrifttypen. For eksempel, hvis en browser ikke understøtter WOFF2, men understøtter WOFF, kan den springe over WOFF2-fontfilen baseret på formatets tip.

Browsere understøtter flere webfontformater: OpenType (TrueType), EOT, WOFF og WOFF2. Nogle browsere understøtter også SVG-skrifttyper, men de er udskrevet og bør ikke længere bruges (og bør ikke forveksles med Nyt OPENTYPE-SVG-format ).

EOT, WOFF, og WOFF2 er teknisk ikke skrifttypeformater. De er komprimerede OpenType-filer med varierende grader af kompression. WOFF2 tilbyder den bedste kompression, efterfulgt af WOFF og EOT.

I forskningsdækning for alle browsere kan du måske være kommet på tværs af noget, der hedder skudsikker @ Font-Face syntaks ved fontspring.

BulletProof Syntax bruger EOT, WOFF2, WOFF, RAW OPENTYPE og SVG Font filer til maksimal browserdækning:

 @ font-face {
  Font-Family: 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 URL-linje kan se lidt mærkeligt ud for dig. Versioner af Internet Explorer 8 og derunder understøtter ikke syntaksen for flere skrifttypeformater, og behandler hele værdien af Src. ejendom som webadresse.

Den BulletProof Syntax Tricks Internet Explorer 8 og nedenfor tror på, at de resterende webadresser er en del af fragmentidentifikatoren for den første URL. Fordi fragmentidentifikatorer ignoreres, når du downloader filer, bruger Internet Explorer 8 og nedenfor simpelthen den første URL.

Browsere andre end Internet Explorer vil springe over linjen, fordi de ikke understøtter eot.

Resten af posterne er, hvad du ville forvente: skrifttypeformater opført i rækkefølge af præference.

Men er Bulletproof Syntax stadig relevant? Nej. Faktisk synes jeg det er skadeligt. SVG-skrifttyper udskrives og understøttes kun af browsere, der ikke længere er i brug.

De fleste websites understøtter Internet Explorer 9 og derover, men syntaxlisterne eot som det første foretrukne skrifttypeformat. Selvom Internet Explorer 9 og Up Support Woff, vil disse versioner stadig downloade EOT-filen, simpelthen fordi den er angivet først.

Fordi de fleste websites ikke længere understøtter gamle browsere, anbefaler jeg stærkt at bruge en forenklet syntaks. Denne forenklede syntaks dækker alle moderne browsere, såvel som lidt ældre, der stadig er i aktiv brug, såsom Android 4.4 og tidligere:

 @ font-face {
  Font-Family: Elena;
  SRC: URL (Elena.WOff2) format ("WOFF2"),
       URL (Elena.woff) format ("WOFF"),
       URL (Elena.otf) format ("OpenType");
}

Selvom ældre Android-versioner stadig bruges, er verdensomspændende afhængighed af disse browsere hurtigt faldende. Snart vil du sandsynligvis også være i stand til også at slippe det RAW OPENTYPE-format og forenkle syntaksen endnu mere:

 @ font-face {
  Font-Family: Elena;
  SRC: URL (Elena.WOff2) format ("WOFF2"),
       URL (Elena.woff) format ("WOFF");
}

I dette tilfælde vil en person, der kører en ældre browser, blot se dine fallback-skrifttyper i stedet for webfonten. Det er fint; De kan stadig læse indholdet i Fallback-skrifttypen.

Der er en anden mulig værdi for Src. descriptor. Det lokal Funktionen tager navnet på en lokal skrifttypefamilie. Hvis skrifttypen opstår, skal installeres på systemet, vil browseren bruge det i stedet og derved undgå en ekstra download.

 @ font-face {
  Font-Family: Elena;
  SRC: LOCAL ("ELENA"),
       URL (Elena-Regular.WOff2) format ("WOFF2"),
       URL (Elena-Regular.WOFF) format ("WOFF");
}

Selvom dette kan virke som en stor optimering, garanterer intet, at den lokale skrifttype matcher din web skrifttype.

Du kan få en anden version af skrifttypen, en skrifttype med forskellige sprogstøtte eller endda en helt anden skrifttype. Af den grund anbefaler jeg normalt ikke at bruge lokal funktion, medmindre du finder disse downsides acceptable.

Dette er et uddrag fra Bram Stein's Webfont Handbook. , fra en bog fra hinanden. I det undersøger han, hvad de skal overveje, når du vælger Web Fonts, hvordan man bruger dem effektivt, og hvordan man optimerer til ydeevne.

Relaterede artikler:

Hvad i helvede er blockchain?
30 kromforlængelser til webdesignere og devs
20 fantastiske gratis Google Web Fonts

Sådan bruger du Web Fonts

Skrifttype familier.

Fontformats.

hvordan - Mest populære artikler

Sådan tegner du et hoved: En komplet vejledning

Opret en brugerdefineret slap bot

Rebuild en 2004-flashwebsted for 2018

Sådan påvirker du Google Rankings med dit indhold

Byg dit eget WebGL Physics-spil

Mal et furry pet portræt

Sådan bygger du verdener til biografen

Sådan master hudskygger i 3D

Kategorier