CSS Font Size

Fontgrootte

font-size Eigenschappen instellen voor de tekstgrootte.

Het beheer van de tekstgrootte in webdesign is belangrijk, maar het mag niet gebruikt worden om een paragraaf eruit te laten zien alsof het een titel is, of om een titel eruit te laten zien alsof het een paragraaf is.

Gebruik altijd de juiste HTML-labels, zoals <h1> - <h6> voor titels, en <p> alleen voor paragrafen.

De waarde van font-size kan absolute of relative grootte zijn.

Absoluut afmeten:

  • Stel de tekst in op de gespecificeerde grootte
  • Staat gebruikers niet toe om de tekstgrootte in alle browsers aan te passen (slechte toegankelijkheid)
  • Absoluut afmeten is nuttig wanneer de fysieke afmetingen van de uitvoer bekend zijn

Relatieve afmetingen:

  • Instellen van de grootte ten opzichte van omringende elementen
  • Staat gebruikers toe om de tekstgrootte in de browser aan te passen

Opmerking:Als u de tekstgrootte niet hebt gespecificeerd, is de standaard grootte van reguliere tekst (zoals paragrafen) 16px (16px = 1em).

Instellen van de fontgrootte in pixels

Het instellen van de tekstgrootte in pixels biedt volledige controle over de tekstgrootte:

Example

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

Try It Yourself

Tip:Als u pixels gebruikt, kunt u nog steeds de schaaltool gebruiken om de grootte van de hele pagina aan te passen.

Stel de tekstgrootte in met em

Veel ontwikkelaars gebruiken em in plaats van pixels om gebruikers de mogelijkheid te geven de tekstgrootte aan te passen (in het browsermenu).

W3C raadt aan om em-grootte te gebruiken.

1em is gelijk aan de huidige fontgrootte. De standaard tekstgrootte in browsers is 16px. Daarom is de standaard grootte 1em 16px.

U kunt deze formule gebruiken om van pixels naar em om te rekenen: pixels/16=em.

Example

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 */
}

Try It Yourself

In het voorbeeld hierboven is de tekstgrootte in em-units gelijk aan de pixelgrootte in het vorige voorbeeld. Maar met em-grootte kunt u de tekstgrootte aanpassen in alle browsers.

Helaas blijven er problemen bestaan met oude versies van Internet Explorer. Bij het vergroten van de tekst is deze groter dan verwacht, en bij het verkleinen is deze kleiner dan verwacht.

Gebruik een combinatie van percentages en em.

Example

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

Try It Yourself

Our code is running well at the moment! It displays the same text size in all browsers and allows all browsers to scale or adjust the text size!

Responsive Font Size

You can use vw Unit setting text size, which means "viewport width" ("viewport width").

As a result, the text size will follow the size of the browser window, please adjust the size of the browser window to see how the font size scales:

Example

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

Try It Yourself

Viewport (Viewport) is the size of the browser window. 1vw = 1% of the viewport width. If the viewport is 50 cm wide, then 1vw is 0.5 cm.