Размер шрифта CSS
Размер шрифта
Свойство font-sizeустанавливает размер текста.
Возможность управлять размером текста важна в веб-дизайне. Однако не следует использовать настройку размера шрифта, чтобы абзацы выглядели как заголовки, а заголовки — как абзацы.
Всегда используйте правильные теги HTML, такие как <h1> - <h6> для заголовков и <p> для абзацев.
Значение размера шрифта может быть абсолютным или относительным размером.
Абсолютный размер:
- Устанавливает текст в указанный размер
- Не позволяет пользователю изменять размер текста во всех браузерах (плохо по соображениям доступности)
- Абсолютный размер полезен, когда известен физический размер вывода.
Относительный размер:
- Устанавливает размер относительно окружающих элементов
- Позволяет пользователю изменять размер текста в браузерах
Примечание. Если вы не укажете размер шрифта, размер по умолчанию для обычного текста, такого как абзацы, составляет 16 пикселей (16 пикселей = 1 см).
Установить размер шрифта в пикселях
Установка размера текста в пикселях дает вам полный контроль над размером текста:
Пример
h1 {
font-size: 40px;
}
h2 {
font-size: 30px;
}
p {
font-size: 14px;
}
Совет. Если вы используете пиксели, вы все равно можете использовать инструмент масштабирования для изменения размера всей страницы.
Установите размер шрифта с помощью 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>:
Пример
body {
font-size: 100%;
}
h1 {
font-size: 2.5em;
}
h2 {
font-size: 1.875em;
}
p {
font-size: 0.875em;
}
Наш код теперь отлично работает! Он показывает одинаковый размер текста во всех браузерах и позволяет всем браузерам масштабировать или изменять размер текста!
Адаптивный размер шрифта
Размер текста можно задать с помощью vwединицы, что означает «ширину области просмотра».
Таким образом, размер текста будет соответствовать размеру окна браузера:
Привет мир
Измените размер окна браузера, чтобы увидеть, как масштабируется размер шрифта.
Пример
<h1 style="font-size:10vw">Hello World</h1>
Viewport — это размер окна браузера. 1vw = 1% ширины области просмотра. Если окно просмотра имеет ширину 50 см, 1vw составляет 0,5 см.