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

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

font-size Свойство устанавливает размер текста.

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

Всегда используйте правильные HTML-теги, например, <h1> - <h6> для заголовков, а <p> только для абзацев.

Значение font-size может быть абсолютным или относительным.

Абсолютные размеры:

  • Установка текста на указанный размер
  • Не позволяет пользователям изменять размер текста во всех браузерах (недостаточная доступность)
  • Абсолютные размеры полезны, когда известен физический размер вывода

Относительные размеры:

  • Установка размера по отношению к окружающим элементам
  • Позволяет пользователям изменять размер текста в браузере

Комментарий:Если вы не указали размер шрифта, то размер обычного текста (например, абзацев) по умолчанию составляет 16px (16px = 1em).

Установка размера шрифта с помощью пикселей

Использование пикселей для установки размера текста позволяет полностью контролировать размер текста:

Пример

h1 {
  font-size: 40px;
}
h2 {
  font-size: 30px;
}
p {
  font-size: 14px;
}

Попробуйте сами

Совет:Если вы использовали пиксели, то все равно можете использовать инструмент масштабирования, чтобы изменить размер всей страницы.

Установка размера шрифта с помощью em

Чтобы позволить пользователям изменять размер текста (в меню браузера), многие разработчики используют em вместо пикселей.

W3C рекомендует использовать единицы измерения em.

1em равен текущему размеру шрифта. По умолчанию размер текста в браузере составляет 16px. Поэтому размер по умолчанию 1em равен 16px.

Эта формула позволяет вычислить размер от пикселей к em: пиксели/16=em.

Пример

h1 {
  font-size: 2.5em; /* 40px/16=2.5em */
}
h2 {
  font-size: 1.875em; /* 30px/16=1.875em */
}
p {
  font-size: 0.875em; /* 14px/16=0.875em */
}

Попробуйте сами

В предыдущем примере размер текста в единицах em соответствует размеру текста в пикселях в предыдущем примере. Однако, если использовать размер em, то можно изменять размер текста во всех браузерах.

К сожалению, в старых версиях Internet Explorer по-прежнему есть проблемы. При увеличении текста он становится больше, чем должен быть, а при уменьшении - меньше.

Использование комбинации процента и em

Пример

body {
  font-size: 100%;
}
h1 {
  font-size: 2.5em;
}
h2 {
  font-size: 1.875em;
}
p {
  font-size: 0.875em;
}

Попробуйте сами

Наш код работает сейчас очень хорошо! Он показывает одинаковый размер текста во всех браузерах и позволяет всем браузерам масштабировать или изменять размер текста!

Адаптивный размер шрифта

Можно использовать vw Единицы для установки размера текста означают “ширина визуального порта” ("viewport width").

Таким образом, размер текста будет зависеть от размера окна браузера, измените размер окна браузера, чтобы увидеть, как изменяется размер шрифта:

Пример

<h1 style="font-size:10vw">Hello World</h1>

Попробуйте сами

Визуальный порт (Viewport) - это размер окна браузера. 1vw = 1% от ширины визуального порта. Если визуальный порт составляет 50 см в ширину, то 1vw составляет 0,5 см.