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