De eigenschap font-size in CSS wordt gebruikt om de hoogte en grootte van het lettertype op te geven. Het beïnvloedt de grootte van de tekst van een element. De standaardwaarde is medium en kan op elk element worden toegepast. De waarden van deze woning omvatten xx-klein , klein , x-klein , enz.

Syntaxis

 font-size: medium|large|x-large|xx-large|xx-small|x-small|small|; 

De lettergrootte kan relatief of absoluut zijn.

Absolute maat

Het wordt gebruikt om de tekst op een bepaalde grootte in te stellen. Als u absolute grootte gebruikt, is het niet in alle browsers mogelijk om de grootte van de tekst te wijzigen. Het is voordelig als we de fysieke omvang van de uitvoer kennen.

Relatieve grootte

Het wordt gebruikt om de grootte van de tekst in te stellen ten opzichte van de aangrenzende elementen. Met relatieve grootte is het mogelijk om de grootte van de tekst in browsers te wijzigen.

OPMERKING: Als we geen lettergrootte definiëren, is de standaardgrootte voor normale tekst, zoals alinea's, 16px, wat gelijk is aan 1em.

Lettergrootte met pixels

Wanneer we de grootte van tekst instellen met pixels, geeft dit ons de volledige controle over de grootte van de tekst.

Voorbeeld

 #first { font-size: 40px; } #second { font-size: 20px; } <p id="first">This is a paragraph having size 40px.</p> <p id="second">This is another paragraph having size 20px.</p> 

Lettergrootte met em

Het wordt gebruikt om de grootte van de tekst te wijzigen. De meeste ontwikkelaars geven er de voorkeur aan in in plaats van pixels . Het wordt aanbevolen door het World Wide Web Consortium (W3C). Zoals hierboven vermeld, is de standaardtekstgrootte in browsers 16px. We kunnen dus zeggen dat de standaardgrootte van 1 em is 16px .

De formule voor het berekenen van de grootte van pixels naar in is em = pixels/16 .

Voorbeeld

 #first { font-size: 2.5em; /* 40px/16=2.5em */ } #second { font-size: 1.875em; /* 30px/16=1.875em */ } #third { font-size: 0.875em; /* 14px/16=0.875em */ } <p id="first">First paragraph.</p> <p id="second">Second paragraph</p> <p id="third">Third Paragraph.</p> 

Responsieve lettergrootte

We kunnen de grootte van de tekst instellen met behulp van a vw-eenheid , wat staat voor de ' breedte van het kijkvenster '. De viewport heeft de grootte van het browservenster.

1vw = 1% van de breedte van de viewport.

Als de breedte van de viewport 50 cm is, is de 1vw gelijk aan 0,5 cm.

Voorbeeld

Eerste paragraaf met een breedte van 5vw.

Tweede alinea met een breedte van 10vw.

Lettergrootte met de eigenschap length

Het wordt gebruikt om de lengte van het lettertype in te stellen. De lengte kan in cm, px, pt, etc. zijn. Negatieve waarden van lengte eigenschap zijn niet toegestaan ​​in lettergrootte.

Syntaxis

 font-size: length; 

Voorbeeld

 .length { color:red; font-size: 5cm; } <p class="length">A paragraph having length 5cm.</p>