Înălțimea fontului

Pentru a seta dimensiunea fontului, se folosește proprietatea font-size:

div{
   font-size: 18px;
}

În acest caz, înălțimea fontului va fi de 18 pixeli. Pixelii reprezintă unitățile de măsură cel mai frecvent utilizate. Pentru a specifica o valoare în pixeli, după valoare se adaugă abrevierea "px".

Dacă la text nu i se aplică în mod explicit o înălțime a fontului, atunci se folosesc valorile implicite ale browserului. De exemplu, pentru textul simplu în paragrafe, aceasta este de 16 pixeli. Aceasta este stilul de bază al textului.

Stilul de bază pentru diferite elemente de text diferă: dacă pentru paragrafe este de 16 pixeli, atunci pentru titlurile h1 este de 32 de pixeli, pentru titlurile h2 - 24 de pixeli și așa mai departe.

Pentru măsurarea fontului se pot folosi și alte unități de măsură.

Cuvinte cheie

În CSS există șapte cuvinte cheie care permit atribuirea dimensiunii fontului relativ la dimensiunea de bază a browserului:

xx-small: 9 pixeli
x-small: 10 pixeli
small: 13 pixeli
medium: dimensiunea de bază a fontului browserului (16 pixeli)
large: 18 pixeli
x-large: 24 pixeli
xx-large: 32 pixeli

Exemplu:

font-size: x-large;

Procente

Procentele permit setarea unei valori relative la fontul de bază sau moștenit. De exemplu:

font-size: 150%;

În acest caz, înălțimea fontului va fi de 150% din cea de bază, adică 16px * 1,5 = 24px

Moștenirea fontului poate schimba valoarea finală. De exemplu, în următoarea situație:

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title>Fonturi în CSS3</title>
       
       <style>
           div {font-size: 10px;}
           p {font-size: 150%;}
       </style>
   </head>
   <body>
   <div>
       <p>Odată, într-o iarnă geroasă</p>
   </div>
   </body>
</html>

Aici, elementul p moștenește de la container - blocul div, un font de 10 pixeli înălțime. Adică 10 pixeli devin acum baza pentru paragraf.

Apoi, pentru elementul p se definește o nouă înălțime a fontului de 150%. Asta înseamnă că înălțimea finală va fi de 10px * 1,5 = 15px.

Unitatea em

Unitatea de măsură em este în multe privințe echivalentă cu procentele. Astfel, 1em este egal cu 100%, .5em este egal cu 50% etc.