CSS skrifttype størrelse

Skriftstørrelse

font-size Egenskaben indstiller tekststørrelsen.

I webdesign er det vigtigt at kunne håndtere tekststørrelse. Men man bør ikke bruge justering af skriftstørrelse til at gøre afsnit ser ud som overskrifter, eller omvendt.

Brug altid de korrekte HTML-tags, f.eks. <h1> - <h6> til overskrifter, og <p> kun til afsnit.

font-size-værdien kan være enten absolut eller relativ størrelse.

Absolut størrelse:

  • Sæt teksten til den specificerede størrelse
  • Tillad ikke brugerne at ændre tekststørrelse i alle browsere (dårlig tilgængelighed)
  • Når den fysiske udskriftsstørrelse er kendt, er absolut størrelse meget nyttig

Relativ størrelse:

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

Bemærk:Hvis du ikke angiver en skriftstørrelse, er standardstørrelsen for almindelig tekst (som afsnit) 16px (16px = 1em).

Indstil skriftstørrelse med pixels

Brug af pixels til at indstille tekststørrelse giver fuld kontrol over tekststørrelsen:

Eksempel

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

Prøv det selv

Ved viser:Hvis du bruger pixels, kan du stadig bruge zoomværktøjet til at justere hele sidens størrelse.

Indstil skriftstørrelse med em

For at tillade brugerne at justere tekststørrelsen (i browserens menu), bruger mange udviklere em i stedet for pixels.

W3C anbefaler at bruge em-enheder.

1em er lig med den nuværende skriftstørrelse. Browsere har som standard en tekststørrelse på 16px. Derfor er standardstørrelsen 1em lig med 16px.

Man kan bruge denne formel til at konvertere fra pixels til em for at beregne størrelsen: pixels/16=em。

Eksempel

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

Prøv det selv

I det foregående eksempel er tekstens størrelse i em-enheder den samme som pixelstørrelsen i det tidligere eksempel. Men ved at bruge em-størrelse kan teksten justeres i alle browsere.

Desværre har den gamle version af Internet Explorer stadig problemer. Når teksten forstørres, er den større end den burde være, og når teksten formindskes, er den mindre.

brug af kombinationen af procent og em

Eksempel

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

Prøv det selv

Vores kode kører godt nu! Den viser samme tekstdimension i alle browsere og tillader alle browsere at skalere eller justere tekstdimensionen!

Responsiv skriftstørrelse

Man kan bruge vw Enhed for at indstille tekstdimension, som betyder "viewport bredde" ("viewport width").

Så vil tekstdimensionen følge browserens vinduesstørrelse, juster vinduesstørrelsen for at se, hvordan skriftstørrelsen skalles:

Eksempel

<h1 style="font-size:10vw">Hello World</h1>

Prøv det selv

Viewport (Viewport) er størrelsen af browserens vindue. 1vw = 1% af viewport bredden. Hvis viewport er 50 cm bred, er 1vw 0.5 cm.