Размер шрифта в CSS

Размер шрифта в CSS определяется с помощью свойства font-size. Это значение может быть задано в различных единицах измерения: пикселях (px), процентах (%), em, rem или относительных размерах измерения (vw, vh и др.), а также абсолютных размерах (mm, cm, inch и др.). Давайте рассмотрим каждую из этих единиц измерения и приведем примеры кода.

1. Пиксели (px)

p {
  font-size: 16px;
}

Этот код установит размер шрифта для элементов <p> в 16 пикселей.

2. Проценты (%)

p {
  font-size: 120%;
}

Этот код устанавливает размер шрифта в 120% от размера шрифта родительского элемента.

3. em и rem

p {
  font-size: 1.2em;
}

h1 {
  font-size: 2rem;
}

В этом примере размер шрифта в элементах <p> будет 1.2 раза больше, чем у их родительских элементов. В то же время, размер шрифта в заголовках <h1> будет в 2 раза больше, чем размер шрифта корневого элемента.

4. Относительные размеры измерения (vw, vh и др.)

p {
  font-size: 5vw;
}

Этот код установит размер шрифта в 5% от ширины окна просмотра.

5. Абсолютные размеры (mm, cm, inch и др.)

p {
  font-size: 12pt;
}

Этот код установит размер шрифта в 12 точек.

В зависимости от требований вашего проекта или предпочтений разработчика, вы можете выбрать любую из указанных единиц измерения для определения размера шрифта в CSS. Важно помнить, что правильный выбор единиц измерения позволит вашему тексту отображаться с оптимальным, согласованным размером на разных устройствах и экранах.