Proprietatea font-size

Proprietatea font-size stabilește dimensiunea fontului textului. Valoarea proprietății poate fi orice unitate pentru dimensiuni (de obicei, px, em sau rem) sau cuvinte cheie speciale (folosite foarte rar).

Sintaxă

cssselector {
  font-size: valoare;
}

Valori sub formă de cuvinte cheie

Valoarea implicită: medium.

Exemplu

Să stabilim pentru paragrafe dimensiunea fontului la 20px:

html<p>
  Lorem ipsum dolor sit amet.
</p>

cssp {
  font-size: 20px;
}

Результат:

Exemplu

În acest exemplu pentru paragraf este stabilită dimensiunea la 16px, iar pentru span în interiorul lui - 150%. În acest caz dimensiunea fontului pentru span va fi 150% din părintele său, adică din paragraf, iar dimensiunea sa reală va fi 16px * 150% = 24px:

html<p>
  Lorem <span>ipsum dolor</span> sit amet.
</p>

cssp {
  font-size: 16px;
}
span {
  font-size: 150%;
}

Результат:

Exemplu

În acest exemplu pentru paragraf este stabilită dimensiunea la 16px, iar pentru span în interiorul lui - larger. În acest caz dimensiunea fontului pentru span va fi mai mare decât a părintelui său (paragrafului):

html<p>
  Lorem <span>ipsum dolor</span> sit amet.
</p>

cssp {
  font-size: 16px;
}
span {
  font-size: larger;
}

Результат:

Exemplu

Atenție la faptul că fonturile cu font-family diferit și același font-size vizual pot fi cu totul de dimensiuni diferite (pentru rezolvarea acestei probleme vezi proprietatea font-size-adjust).

În exemplul de mai jos ambelor paragrafe le este stabilit font-size la 16px, dar font-family diferite:

html<p id="elem1">
  Lorem ipsum dolor sit amet.
</p>
<p id="elem2">
  Lorem ipsum dolor sit amet.
</p>

css#elem1 {
  font-size: 16px;
  font-family: Arial;
}
#elem2 {
  font-size: 16px;
  font-family: "Times New Roman";
}

Результат: