CSS skrifttype

CSS skriftattributter definerer teksts skrifttype, størrelse, fedme, stil (som skråskrift) og form (som små store bokstaver).

CSS skrifttype serie

Der er to forskellige typer af skrifttype navne i CSS:

  • Generel skrifttype - kombinationer af skriftsystemer med lignende udseende (f.eks. "Serif" eller "Monospace")
  • Specifik skrifttype - specifikke skrifttyper (f.eks. "Times" eller "Courier")

Udover forskellige specifikke skrifttyper har CSS defineret 5 generelle skrifttyper:

  • Serif-skrifttype
  • Sans-serif-skrifttype
  • Monospace-skrifttype
  • Kursiv skrifttype
  • Fantasy-skrifttype

Hvis du vil vide mere om skrifttyper, læs CSS skrifttype serie.

Specificeret skrifttype

Brug font-family-ejegenskab Definere teksts skrifttype

Brug af generel skrifttype

Hvis du ønsker, at dokumentet bruger en sans-serif-skrifttype, men du ikke bekymrer dig om hvilken skrifttype der bruges, er dette en passende erklæring:

body {font-family: sans-serif;}

Prøv det selv

Brugeragenten vil derefter vælge en skrifttype fra sans-serif-skrifttypegruppen (f.eks. Helvetica) og anvende den på body-elementet. På grund af arv vil denne skrifttypevælgelse også anvendes på alle elementer, der indeholder body-elementet, medmindre en mere specifik vælger overwriter den.

Specificeret skrifttype

Udover at bruge en generel skrifttype kan du også specificere en mere specifik skrifttype ved hjælp af font-family-ejegenskaben.

Følgende eksempel sætter Georgia-skrifttype til alle h1-elementer:

h1 {font-family: Georgia;}

Prøv det selv

Dette regelsæt kan også skabe et andet problem, hvis brugeragenten ikke har installeret Georgia-skrifttypen, kan kun brugeragentens standardfont bruges til at vise h1-elementet.

Vi kan løse dette ved at kombinere et specifikt skrifttypenavn med en generel skrifttype

h1 {font-family: Georgia,} serif;}

Prøv det selv

Hvis læseren ikke har installeret Georgia, men har installeret Times-skrifttypen (en serif-skrifttype i serien), kan brugeragenten muligvis bruge Times til h1-elementet. Selvom Times ikke er helt matchende med Georgia, er den mindst tilstrækkelig nær.

Derfor anbefaler vi at give en generel skrifttype til alle font-family-regler. Dette giver en sikkerhedskopi, så hvis brugeragenten ikke kan levere en specifik skrifttype, der matcher reglen, kan en kandidatskrifttype vælges.

Hvis du er meget bekendt med skrifttyper, kan du også specificere en række lignende skrifttyper for den givne element. For at gøre dette skal du rækkefølge skrifttyperne og forbinde dem med kommaer:

p {font-family: Times, TimesNR, 'New Century Schoolbook',}}
     Georgia, 'New York', serif;}

Prøv det selv

Baseret på denne liste vil brugeragenten søge efter disse skrifttyper i den nævnte rækkefølge. Hvis alle nævnte skrifttyper er utilgængelige, vil der simpelthen vælges en tilgængelig serif-skrifttype.

Brug af anførselstegn

Du har måske bemærket, at der bruges enkeltanførselstegn i de ovenstående eksempler. Det er kun nødvendigt at bruge anførselstegn i font-family-erklæringen, hvis fontnavnet indeholder en eller flere mellemrum (f.eks. New York), eller hvis fontnavnet inkluderer # eller $-symboler.

Enten enkelt- eller dobbeltanførselstegn kan accepteres. Men hvis en font-family egenskab placeres i HTML's style egenskab, skal man bruge den type anførsel, der ikke bruges af egenskaben:

<p style="font-family: Times, TimesNR, 'New Century Schoolbook', Georgia,
 'New York', serif;">...

Prøv det selv

Skrifttype stil

font-style egenskabBruges ofte til at fastsætte kursiv tekst.

Denne egenskab har tre værdier:

  • normal - tekst vises normalt
  • italic - tekst vises i kursiv
  • oblique - tekst vises skæv

Eksempel

p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}

Prøv det selv

Forskellen mellem italic og oblique

font-style er meget simpel: bruges til at vælge mellem normal tekst, italic tekst og oblique tekst. Det eneste, der er lidt komplekst, er at klart skelne mellem italic tekst og oblique tekst.

Kursiv (italic) er en simpel skrifttype stil, der foretager nogle små ændringer i strukturen af hver bogstav for at reflektere ændret udseende. Til forskel fra dette er oblique tekst en skæv version af normal lodret tekst.

Under normale omstændigheder ser italic og oblique tekst helt ens ud i webbrowserne.

Skrifttype deformation

font-variant egenskabKan indstille lille versal.

Kleiner versal er ikke almindelig versal, men heller ikke lille skrift, denne skrift bruger forskellige størrelser af versaler.

Eksempel

p {font-variant:small-caps;}

Prøv det selv

Skrift fedhed

font-weight-egenskabenIndstil tekstens tykkelse.

Brug nøglen bold til at sætte teksten i fed skrift.

Nøglerne 100 ~ 900 angiver 9 forskellige fedthedsgrader for skriften. Hvis en skrift har integrerede fedthedsgrader, vil disse tal direkte mappe til prædefinerede niveauer, 100 svarer til den fineste skriftsform, 900 svarer til den tykkeste skriftsform. Tallene 400 svarer til normal, og 700 svarer til bold.

Hvis du sætter elementets fedhed til bolder, vil browseren sætte en tykkere skrift end den arvede værdi. I modsætning hertil vil nøglen lighter føre til, at browseren sætter fedtheden ned i stedet for op.

Eksempel

p.normal {font-weight:normal;}
p.thick {font-weight:bold;}
p.thicker {font-weight:900;}

Prøv det selv

Skriftstørrelse

font-size-egenskabenIndstil tekststørrelsen.

Evnen til at styre tekststørrelse er vigtig i webdesign, men du bør ikke justere tekststørrelsen, så afsnit ser ud som titler, eller titler som afsnit.

Brug altid korrekte HTML-titler, f.eks. brug <h1> - <h6> til at markere titler, brug <p> til at markere afsnit.

font-size-værdien kan være absolut eller relativ

Absolut værdi:

  • Sæt teksten til en bestemt størrelse
  • Tillad ikke brugerne at ændre tekststørrelse i alle browsere (er ikke gunstigt for tilgængelighed)
  • Absolut størrelse er nyttig, når den fastlægger den fysiske størrelse på output

Relativ størrelse:

  • Indstil størrelse i forhold til omgivende elementer
  • Tillad brugerne at ændre tekststørrelse i browseren

Bemærk:Hvis du ikke specificerer skriftstørrelse, er standardstørrelsen for almindelig tekst (f.eks. afsnit) 16 pixels (16px=1em).

Brug pixels til at indstille skriftstørrelse

Ved at indstille tekststørrelse i pixels kan du fuldstændigt kontrollere tekststørrelsen:

Eksempel

h1 {font-size:60px;}
h2 {font-size:40px;}
p {font-size:14px;}

Prøv det selv

I Firefox, Chrome og Safari kan tekststørrelsen justeres igen i de nævnte eksempler, men ikke i Internet Explorer.

Selvom det er muligt at justere tekststørrelsen med browserens zoomværktøj, er dette faktisk en justering af hele siden, og ikke kun teksten.

Brug em til at indstille skriftstørrelse

For at undgå problemer med at justere tekst i Internet Explorer, bruger mange udviklere em-enheder i stedet for pixels.

W3C anbefaler at bruge em-størrelsesenheder.

1em er lig med den aktuelle skrifttypestørrelse. Hvis et elements font-size er 16 pixels, er 1em lig med 16 pixels for dette element. Når man sætter skrifttypestørrelse, ændres em-værdien i forhold til overordnede elementers skrifttypestørrelse.

Standard tekstdimensjonen i browsere er 16 pixels. Derfor er 1em's standardstørrelse 16 pixels.

Man kan bruge nedenstående formel til at konvertere pixels til em:pixels/16=em

(Bemærk: 16 er lig med standard skrifttypestørrelsen for overordnede elementer, antag at overordnede elementers font-size er 20px, så skal formlen ændres til:pixels/20=em

Eksempel

h1 {font-size:3.75em;} /* 60px/16=3.75em */
h2 {font-size:2.5em;}  /* 40px/16=2.5em */
p {font-size:0.875em;} /* 14px/16=0.875em */

Prøv det selv

I det ovenstående eksempel er teksten størrelse i em-enheder lig med teksten i pixels fra det forrige eksempel. Men hvis man bruger em-enheder, kan man justere teksten størrelse i alle browsere.

Desværre er der stadig problemer i IE. Når teksten størrelse genindstilles, vil den være større eller mindre end den normale størrelse.

Brug af procent og em

En løsning, der fungerer i alle browsere, er at sætte standard font-size værdien i procent for body-elementet (overordnede element):

Eksempel

body {font-size:100%;}
h1 {font-size:3.75em;}
h2 {font-size:2.5em;}
p {font-size:0.875em;}

Prøv det selv

Vores kode er meget effektiv. Den viser samme tekststørrelse i alle browsere og tillader alle browsere at skalere tekststørrelsen.

CSS skrifttypeeksempel:

Sæt tekstskrifttype
Dette eksempel viser, hvordan man sætter tekstskrifttype.
Sæt skriftstørrelse for skrifttypen
Dette eksempel viser, hvordan man sætter skriftstørrelse for skrifttypen.
Sæt skrifttypestil for skrifttypen
Dette eksempel viser, hvordan man sætter skrifttypestil for skrifttypen.
Sæt skrifttypevariant for skrifttypen
Dette eksempel viser, hvordan man sætter skrifttypevariant for skrifttypen.
Sæt skrifttykkelse for skrifttypen
Dette eksempel viser, hvordan man sætter skrifttykkelse for skrifttypen.
Alle skrifttypeegenskaber i én deklaration
Dette eksempel viser, hvordan man bruger kortformsegenskaber til at sætte skrifttypeegenskaber i én deklaration.

CSS skrifttypeegenskab

Egenskab Beskrivelse
font Kortform egenskab. Fungerer til at sætte alle skrifttypeegenskaber i én deklaration.
font-family Indstil skrifttype serie.
font-size Indstil skrifttype størrelse.
font-size-adjust Intelligente skalering af erstatningsskrifttypen, når den foretrukne skrifttype ikke er tilgængelig. (CSS2.1 har fjernet denne egenskab.)
font-stretch Horisontalt stræk skrifttypen. (CSS2.1 har fjernet denne egenskab.)
font-style Indstil skrifttype stil.
font-variant Vis tekst som små kapitale eller normal skrift.
font-weight Indstil skrifttyper tykkelse.