Правильно подобранный размер шрифта очень сильно влияет на удобство пользования сайтом. Ты можешь использовать CSS свойство font-size чтобы изменить размер шрифта (текста) на HTML странице.

CSS свойство font-size может принимать разные значения, чтобы изменить размер шрифта.

Я расскажу тебе как использовать CSS свойство font-size и какие типы значений ты можешь использовать с ним.

Синтаксис и пример кода

Общий синтаксис CSS свойства font-size выглядит так

font-size: value;

Рассмотрим пример

<!DOCTYPE html>
<html>

<body>
	<p style="font-size: 20px;"> Hello World </p>
</body>

</html>

Тут мы установили CSS свойство font-size равным 20px и текст внутри параграфа (тега <p>) стал размером 20px.

CSS свойство font-size может принимать абсолютные и относительные значения.

Абсолютные значения font-size

Абсолютное значение - это фиксированное число. Если ты говоришь

font-size: 16px;

То размер шрифта всегда будет 16px, безотносительно того, какой размер текста используется в других местах твоей веб страницы.

Также абсолютные значения можно разделить на 2 категории:

  • названия, например small или x-large
  • числа и размерности, например 10mm или 20px

Как задать font-size по названию

Ты можешь задать CSS свойству font-size любое из этих значений:

  • medium - браузерный размер по-умолчанию
  • small - меньше чем medium
  • x-small - меньше чем small
  • xx-small - меньше чем x-small
  • large - меньше чем medium
  • x-large - меньше чем large
  • xx-large - меньше чем x-large

Как задать font-size с помощью числа и размерности

Для числа подойдет любое целое значение, а размерность ты можешь выбрать из этих вариантов

  • mm - миллиметры
  • cm - сантиметры
  • in - дюймы
  • pt - пойнты - 1pt= 0.0353cm
  • pc - пики - pc = 12pt
  • px - пиксели

В веб разработке чаще всего используются пиксели. Другие размерности больше подходят для типографии и печати.

Пример использования абсолютных величин для font-size

<!DOCTYPE html>

<html>
   <body>
              <p style="font-size:xx-large"> Big text </p>
              <p style="font-size:18px"> 18 pixels </p>
              <p style="font-size:x-small"> Small text </p>
              <p style="font-size:18pt"> 18 points </p>
    </body>
</html>

В этом примере размер шрифта для каждого параграфа отличается.

Попробуй скопировать код в отдельный html файл и открыть его в браузере.

Абсолютные величины не подходят для ситуаций, когда ты хочешь чтобы размер текста менялся динамически. На помощь приходят относительные значения font-size