Skip to main content

Hvad er de generiske skrifttypefamilier i CSS?

Porters 3 generiske strategier (Juni 2026)

Porters 3 generiske strategier (Juni 2026)
Anonim

Når du designer en hjemmeside, er et af de vigtigste elementer i en side, du vil arbejde med, tekstindhold. Som sådan, når du bygger en webside og stiler den med CSS, vil en stor del af denne indsats blive centreret omkring områdets typografi.

Typografisk design spiller en vigtig rolle i website design. Godt udformet og formateret tekstindhold hjælper et websted med at blive mere succesfuldt ved at skabe en læseroplevelse, der er både fornøjelig og nem at forbruge. En del af din indsats for at arbejde med typen er at vælge de rigtige skrifttyper til dit design og derefter bruge CSS til at tilføje de skrifttyper og skrifttypestile til sidens display. Dette gøres ved at bruge det, der kaldes en "font-stack"

Font-Stacks

Når du angiver en skrifttype, der skal bruges på en webside, er det en god praksis at også inkludere tilbagekaldningsindstillinger, hvis dit skrifttypevalg ikke kan findes. Disse tilbagesendelsesindstillinger er præsenteret i "fontstakken". Hvis browseren ikke kan finde den første skrifttype, der er angivet i stakken, bevæger den sig videre til den næste. Det fortsætter denne proces, indtil den finder en skrifttype, som den kan bruge, eller den løber tør for valg (i så fald vælger den bare et system skrifttype, det ønsker). Her er et eksempel på, hvordan en fontstabel ville se i CSS, når den blev anvendt til elementet "body":

krop { font-familie: Georgia, "Times New Roman", serif;}

Bemærk, at vi først angiver skrifttypen Georgia. Som standard er dette, hvad siden vil bruge, men hvis den skrifttype ikke er tilgængelig af en eller anden grund, vil siden falde tilbage til Times New Roman. Vi vedlægger dette skrifttypenavn i dobbelt citater, fordi det er et ord med flere ord. Enkelt-skrifttypenavne, som Georgien eller Arial, kræver ikke citaterne, men multi-word-skrifttypenavn har brug for dem, så browseren ved, at alle disse ord udgør skrifttypenavnet.

Hvis du ser en ende af skrifttypestakken, skal du bemærke, at vi slutter med ordet "serif". Det er et generisk skrifttype-familienavn. I den usandsynlige hændelse, at en person ikke har Georgien eller Times New Roman på deres computer, vil webstedet bruge det uanset serif skrifttype det kunne finde. Dette er at foretrække for at lade webstedet falde tilbage til hvilke skrifttyper det ønsker, fordi du i det mindste kan fortælle, hvilken type skrifttype der skal bruges, så det samlede look og tone i et websites design vil være så intakt som muligt. Ja, browseren vil vælge en skrifttype til dig, men i det mindste giver du vejledning, så det ved, hvilken type skrifttype der ville fungere bedst inden for designet.

Generiske skrifttypefamilier

Det generiske skrifttypenavn, der er tilgængeligt i CSS, er:

  • kursiv
  • fantasi
  • monospace
  • serif
  • sans serif

Selv om der er mange andre skrifttypeklassifikationer, der er tilgængelige i webdesign og typografi, herunder slab-serif, blackletter, display, grunge og mere, er disse 5 ovenfor angivne generiske skrifttypenavne de, du ville bruge i en skrifttabstabel i CSS. Hvad er forskellene i disse skrifttypeklassifikationer? Lad os se!

Cursive skrifttyper har ofte tynde udsmykkede brevformularer, der er beregnet til at replikere fancy håndskrevet tekst. Disse skrifttyper på grund af deres tynde, blomstrende bogstaver er ikke egnede til stor blokke af indhold som body copy. Cursive skrifttyper bruges generelt til overskrifter og kortere tekstbehov, der kan vises i større skriftstørrelser.

Fantasi skrifttyper er de noget skøre skrifttyper, der ikke rigtig falder ind i nogen anden kategori. Skrifttyper, der replikerer kendte logoer, som bogstaverne fra Harry Potter eller Back to the Future-film, ville falde ind under denne kategori. Endnu en gang er disse skrifttyper ikke egnede til kropsindhold, da de ofte er så stiliserede, at læsning af længere passager af tekst, der er skrevet i disse skrifttyper, er alt for svært at gøre.

Monospace skrifttyper er dem, hvor alle bogstaverne er lige store og adskilt, som du ville have fundet på en gammel skrivemaskine. I modsætning til andre skrifttyper, der har variable bredder for bogstaver afhængigt af deres størrelse (for eksempel vil en hovedstad "W" tage meget mere plads end en lille "i"), monospace skrifttyper er fast bredde for alle tegn. Disse skrifttyper bruges ofte, når kode vises på en side, fordi de ser tydeligt anderledes ud end anden tekst på den pågældende side.

Serif skrifttyper er en af ​​de mere populære klassifikationer. Disse er skrifttyper, der har de små ekstra ligaturer på bogstavformularerne. Disse ekstra stykker hedder "serifs". Fælles serif skrifttyper er Georgia og Times New Roman. Serif skrifttyper kan bruges til stor tekst som overskrift samt lange passager af tekst og body kopi.

Sans serif er den endelige klassifikation vi vil se på. Disse er skrifttyper, der ikke har de ovennævnte ligaturer. Navnet betyder "uden serifs". Populære skrifttyper i denne kategori ville være Arial eller Helvetica. På samme måde som serifs kan sans-serif-skrifttyper bruges lige så godt i overskrifter og kropsindhold.