Egenskapen font-size i CSS används för att ange höjden och storleken på teckensnittet. Det påverkar storleken på texten i ett element. Dess standardvärde är medium och kan tillämpas på varje element. Värdena för denna fastighet inkluderar xx-liten , små , x-liten , etc.

Syntax

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

Teckenstorleken kan vara relativ eller absolut.

Absolut storlek

Den används för att ställa in texten till en bestämd storlek. Med absolut storlek är det inte möjligt att ändra storleken på texten i alla webbläsare. Det är fördelaktigt när vi vet den fysiska storleken på utmatningen.

Relativ storlek

Den används för att ställa in storleken på texten i förhållande till dess närliggande element. Med relativ storlek är det möjligt att ändra storleken på texten i webbläsare.

OBS: Om vi ​​inte definierar en teckensnittsstorlek är standardstorleken 16px för normal text som stycken, vilket är lika med 1em.

Teckenstorlek med pixlar

När vi ställer in storleken på text med pixlar, ger det oss full kontroll över storleken på texten.

Exempel

 #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> 

Teckenstorlek med em

Den används för att ändra storlek på texten. De flesta av utvecklarna föredrar i istället för pixlar . Det rekommenderas av World Wide Web Consortium (W3C). Som nämnts ovan är standardtextstorleken i webbläsare 16px. Så vi kan säga att standardstorleken på 1em är 16px .

Formeln för att beräkna storleken från pixlar till i är em = pixlar/16 .

Exempel

 #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> 

Responsiv teckenstorlek

Vi kan ställa in storleken på texten genom att använda en vw enhet , som står för ' visningsportens bredd '. Viewporten är storleken på webbläsarfönstret.

1vw = 1 % av visningsportens bredd.

Om bredden på visningsporten är 50 cm är 1vw lika med 0,5 cm.

Exempel

Första stycket har en bredd på 5vw.

Andra stycket med bredden 10vw.

Teckenstorlek med egenskapen length

Den används för att ställa in storleken på teckensnittet i längd. Längden kan vara i cm, px, pt, etc. Negativa värden på längd Egenskaper är inte tillåtna i teckenstorlek.

Syntax

 font-size: length; 

Exempel

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