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> Test het nu 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> Test het nu 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.
Test het nuLettergrootte 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> Test het nu