Font-size сипаттамасы

font-size сипаттамасы мәтін қаріпінің өлшемін орнатады. Сипаттама мәні ретінде кез келген өлшем бірліктері (әдетте, бұл px, em немесе rem) немесе арнайы кілт сөздер (өте сирек қолданылады) қызмет етеді.

Синтаксис

cssселектор {
  font-size: мән;
}

Кілт сөздер түріндегі мәндер

Әдепкі мән: medium.

Мысал

Абзацтарға қаріп өлшемін 20px етіп орнатайық:

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

cssp {
  font-size: 20px;
}

Результат:

Мысал

Бұл мысалда абзац үшін өлшем 16px, ал оның ішіндегі span үшін - 150% деп берілген. Бұл жағдайда span үшін қаріп өлшемі өзінің ата-анасынан, яғни абзацтан 150% болады, және оның нақты өлшемі 16px * 150% = 24px болады:

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

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

Результат:

Мысал

Бұл мысалда абзац үшін өлшем 16px, ал оның ішіндегі span үшін - larger деп берілген. Бұл жағдайда span үшін қаріп өлшемі оның ата-анасынан (абзацтан) үлкен болады:

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

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

Результат:

Мысал

Әр түрлі font-family және бірдей font-size бар қаріптер визуалды түрде мүлдем бір өлшемді болмауы мүмкін екеніне назар аударыңыз (бұл мәселені шешу үшін font-size-adjust сипаттамасын қараңыз).

Төмендегі мысалда екі абзацқа да font-size 16px деп берілген, бірақ әр түрлі font-family:

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";
}

Результат: