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