CSS-skriftstørrelse

Indholdsfortegnelse

    Vis indholdsfortegnelse

Skriftstørrelse

Egenskaben font-size angiver størrelsen på teksten.

At kunne styre tekststørrelsen er vigtigt i webdesign. Dog du bør ikke bruge skriftstørrelsesjusteringer for at få afsnit til at ligne overskrifter, eller overskrifter ligner afsnit.

Brug altid de korrekte HTML-tags, såsom <h1> - <h6> til overskrifter og <p> for afsnit.

Skriftstørrelsesværdien kan være en absolut eller relativ størrelse.

Absolut størrelse:

  • Indstiller teksten til en specificeret størrelse

  • Tillader ikke en bruger at ændre tekststørrelsen i alle browsere (dårligt af tilgængelighedsgrunde)

  • Absolut størrelse er nyttig, når den fysiske størrelse af output er kendt

Relativ størrelse:

  • Indstiller størrelsen i forhold til omgivende elementer

  • Tillader en bruger at ændre tekststørrelsen i browsere

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

Indstil skriftstørrelse med pixel

Indstilling af tekststørrelsen med pixels giver dig fuld kontrol over tekststørrelsen:

Eksempel

h1 {
  font-size: 40px;
}

h2 {
  font-size: 30px;
}

p {
  font-size: 14px;
}

Prøv det selv →

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  font-size: 40px;
}

h2 {
  font-size: 30px;
}

p {
  font-size: 14px;
}
</style>
</head>
<body>

<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

</body>
</html>

Tip: Hvis du bruger pixels, kan du stadig bruge zoomværktøjet til at ændre størrelsen på hele siden.

Indstil skriftstørrelse med Em

For at give brugerne mulighed for at ændre størrelsen på teksten (i browsermenuen), er der mange udviklere bruger em i stedet for pixels.

1em er lig med den aktuelle skriftstørrelse. Standardtekststørrelsen i browsere er 16 px. Så standardstørrelsen på 1em er 16px.

Størrelsen kan beregnes fra pixels til em ved hjælp af denne formel: <i>pixels/16=<i>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 →

<!DOCTYPE html>
<html>
<head>
<style>
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 */
}
</style>
</head>
<body>

<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<p>This is a paragraph.</p>
<p>Specifying the font-size in em allows all major browsers to resize the text.
Unfortunately, there is still a problem with older versions of IE. When resizing the text, it becomes larger/smaller than it should.</p>

</body>
</html>

I eksemplet ovenfor er tekststørrelsen i em den samme som i det foregående eksempel i pixels. Men med em-størrelsen er det muligt at justere tekststørrelsen i alle browsere.

Desværre er der stadig et problem med ældre versioner af Internet Explorer. Teksten bliver større, end den burde når den gøres større, og mindre end den burde, når den gøres mindre.

Brug en kombination af procent og em

Løsningen, der virker i alle browsere, er at indstille en standard skriftstørrelse i procent for <body>-elementet:

Eksempel

body {
  font-size: 100%;
}

h1 {
  font-size: 2.5em;
}

h2 {
  font-size: 1.875em;
}

p {
  font-size: 0.875em;
}

Prøv det selv →

<!DOCTYPE html>
<html>
<head>
<style>
body {
  font-size: 100%;
}

h1 {
  font-size: 2.5em;
}

h2 {
  font-size: 1.875em;
}

p {
  font-size: 0.875em;
}
</style>
</head>
<body>

<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<p>This is a paragraph.</p>
<p>Specifying the font-size in percent and em displays the same size in all major browsers, and allows all browsers to resize the text!</p>

</body>
</html>

Vores kode fungerer nu fantastisk! Det viser den samme tekststørrelse i alle browsere, og tillader alle browsere at zoome eller ændre størrelsen på teksten!

Responsiv skriftstørrelse

Tekststørrelsen kan indstilles med en vw enhed, hvilket betyder "viewport width".

På den måde vil tekststørrelsen følge størrelsen på browservinduet:

Hello World

Resize the browser window to see how the font size scales.

Eksempel

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

Prøv det selv →

<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<body>

<h1 style="font-size:10vw;">Responsive Text</h1>

<p style="font-size:5vw;">Resize the browser window to see how the text size scales.</p>

<p style="font-size:5vw;">Use the "vw" unit when sizing the text. 10vw will set the size to 10% of the viewport width.</p>

<p>Viewport is the browser window size. 1vw = 1% of viewport width. If the viewport is 50cm wide, 1vw is 0.5cm.</p>

</body>
</html>

Viewport er browservinduets størrelse. 1vw=1 % af visningsportens bredde. Hvis viewporten er 50 cm bred, er 1vw 0,5 cm.