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