Skip to main content

Hva er de generelle skriftfamiliene i CSS?

Porters Generiske Strategier *Clickbait* (April 2025)

Porters Generiske Strategier *Clickbait* (April 2025)
Anonim

Når du designer et nettsted, er et av hovedelementene i en side du vil jobbe med, tekstinnhold. Som sådan, når du bygger en webside og stiler den med CSS, vil en stor del av dette arbeidet være sentrert rundt nettstedets typografi.

Typografisk design spiller en viktig rolle i webdesign. Godt lagt ut og formatert tekstinnhold hjelper et nettsted å bli mer vellykket ved å skape en leseropplevelse som er både hyggelig og lett å konsumere. En del av arbeidet med å jobbe med type vil være å velge de riktige skrifttypene for designet og deretter bruke CSS til å legge til de fonter og skrifttypestiler på sidens display. Dette gjøres ved å bruke det som kalles en "font-stack"

Font-Stacks

Når du spesifiserer en skrift som skal brukes på en nettside, er det en god praksis å også inkludere tilbakekallingsalternativer dersom du ikke finner fontvalgene. Disse tilbakekallingsalternativene er presentert i "font stack". Hvis nettleseren ikke finner den første skrifttypen som er oppført i stakken, går den videre til neste. Det fortsetter denne prosessen til den finner en skrifttype som den kan bruke, eller den går tom for valg (i så fall velger den bare en hvilken som helst systemfont som den ønsker). Her er et eksempel på hvordan en skriftstapel ville se i CSS når den ble brukt på "body" -elementet:

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

Legg merke til at vi spesifiserer fonten Georgia først. Som standard vil dette være hva siden vil bruke, men hvis den skrifttypen ikke er tilgjengelig av en eller annen grunn, vil siden falle tilbake til Times New Roman. Vi vedlegger dette skrifttypenavnet i dobbelte sitater fordi det er et ord med flere ord. Enkeltordskriftsnavn, for eksempel Georgia eller Arial, krever ikke anførselstegn, men multi-word skrifttypenavn trenger dem, slik at nettleseren vet at alle disse ordene utgjør skrifttypenavnet.

Hvis du ser en slutt på fontstakken, bør du legge merke til at vi slutter med ordet "serif". Det er et generisk skriftfamilienavn. I det usannsynlige tilfelle at en person ikke har Georgia eller Times New Roman på sin datamaskin, ville nettstedet bruke hvilken som helst serif font det kunne finne. Dette er å foretrekke for å la nettstedet falle tilbake til hvilke fonter det vil, fordi du i det minste kan fortelle hva slags skrift du skal bruke slik at det generelle utseendet og tonen til et nettsteds design vil være så intakt som mulig. Ja, nettleseren vil velge en skrift for deg, men i det minste gir du veiledning, så det vet hvilken type skrift som vil fungere best innen design.

Generiske fontfamilier

Det generiske skriftnavnet som er tilgjengelig i CSS er:

  • kursiv
  • fantasi
  • monospace
  • serif
  • sans serif

Selv om det finnes mange andre skrifttypeklassifikasjoner som er tilgjengelige i webdesign og typografi, inkludert slab-serif, blackletter, display, grunge og mer, er disse 5 ovenfor nevnte generiske skrifttypenavnene de du vil bruke i en fontstack i CSS. Hva er forskjellene i disse skriftklassifiseringene? La oss ta en titt!

kursiv skrifttyper har ofte tynne, utsmykkede brevformularer som er ment å gjenskape fancy håndskrevet tekst. Disse skriftene, på grunn av deres tynne, blomstrende bokstaver, er ikke egnet for stor blokk av innhold som kroppskopi. Kursive skrifttyper brukes vanligvis til overskrifter og kortere tekstbehov som kan vises i større skriftstørrelser.

Fantasi skrifttyper er de litt galne skrifter som ikke virkelig faller inn i noen annen kategori. Skrifter som gjengir kjente logoer, som brevformene fra Harry Potter eller Back to the Future-filmer, vil falle inn i denne kategorien. Igjen, disse skriftene er ikke egnede for kroppsinnhold siden de ofte er så stiliserte at det å lese lengre passasjer av tekst skrevet i disse skriftene er mye for vanskelig å gjøre.

monospace skrifttyper er de der alle brevformene er like store og fordelte som du ville ha funnet på en gammel skrivemaskin. I motsetning til andre skrifttyper som har variable bredder for bokstaver, avhengig av størrelsen deres (for eksempel, vil en hovedstad "W" ta opp mye mer plass enn en liten "jeg"), monospace-skrifttyper er fast bredde for alle tegnene. Disse skriftene brukes ofte når kode vises på en side fordi de ser tydelig annerledes ut enn annen tekst på den siden.

Serif skrifttyper er en av de mest populære klassifiseringene. Disse er fonter som har de lille ekstra ligaturene på brevformene. Disse ekstrabitene heter "serifs". Vanlige seriffonter er Georgia og Times New Roman. Serif skrifttyper kan brukes til stor tekst som overskrift, samt lange passasjer av tekst og kroppskopi.

Sans serif er den endelige klassifiseringen vi vil se på. Disse er skrifter som ikke har de nevnte ligaturene. Navnet betyr "uten serifs". Populære skrifttyper i denne kategorien vil være Arial eller Helvetica. I likhet med serifs kan sans-serif-fonter brukes like godt i overskrifter og kroppsinnhold.