Размер шрифта CSS
Размер шрифта
Свойство font-size (Размер шрифта) задает размер текста.
Умение управлять размером текста важно в веб-дизайне. Тем не менее, вы не должны использовать корректировки размера шрифта, чтобы абзацы выглядели как заголовки, или заголовки выглядели как абзацы.
Всегда используйте соответствующие HTML-теги, такие как <h1> - <h6> для заголовков и <p> для абзацев.
Значение размера шрифта может быть абсолютным или относительным.
- Устанавливает текст в заданный размер
- Не позволяет пользователю изменять размер текста во всех браузерах (плохо по причинам доступности)
- Абсолютный размер полезен, когда известен физический размер вывода
- Устанавливает размер относительно окружающих элементов
- Позволяет пользователю изменять размер текста в браузерах
Примечание: Если вы не указываете размер шрифта, размер по умолчанию для обычного текста, такого как абзацы, составляет 16px (16px=1em).
Установите размер шрифта с помощью пикселей
Установка размера текста с помощью пикселей дает вам полный контроль над размером текста:
Пример
Совет: Если вы используете пиксели, вы все равно можете использовать инструмент масштабирования для изменения размера всей страницы.
Установите размер шрифта с помощью Em
Чтобы позволить пользователям изменять размер текста (в меню браузера), многие разработчики используют em вместо пикселей.
1em равен текущему размеру шрифта. Размер текста по умолчанию в браузерах составляет 16 пикселей. Таким образом, размер по умолчанию 1em составляет 16 пикселей.
Размер можно рассчитать от пикселей до 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>:
Пример
Наш код теперь отлично работает! Он показывает одинаковый размер текста во всех браузерах и позволяет всем браузерам масштабировать или изменять размер текста!
Адаптивный Размер Шрифта
Размер текста может быть установлен с помощью единицы vw, что означает "ширина просмотра".
Таким образом, размер текста будет соответствовать размеру окна браузера:
<h1 style="font-size:10vw">Привет мир</h1>
Viewport - это размер окна браузера. 1vw = 1% ширины видового экрана. Если видовой экран имеет ширину 50 см, то 1vw равен 0,5 см.