Размер текста | WebReference
Размер шрифта или, как он ещё называется в типографике — кегль, определяется высотой символов, которая, в свою очередь, на веб-странице может задаваться как в относительных (em, rem), так и в абсолютных единицах (дюймы (in), миллиметры (mm), пункты (pt) и др).
На вид шрифта влияет не только заданный размер, но и выбор гарнитуры. Шрифт Arial выглядит крупнее, чем шрифт Times того же размера, а шрифт Courier New чуть меньше шрифта Arial (рис. 1). Учитывайте эту особенность при выборе шрифта и его размеров.
Рис. 1. Размеры текста на веб-странице
На рис. 1 приведены три типа шрифтов с размером 12 и 24 пункта. Легко заметить, что при одинаковых заданных размерах текст различается как по высоте, так и по насыщенности.
Размер текста устанавливается через свойство font-size, значение может быть задано несколькими способами. Набор констант (хх-small, x-small, small, medium, large, x-large, xx-large) указывает размер, который называется абсолютным.
На практике константы применяются редко, а в основном используются допустимые единицы CSS: em (высота шрифта элемента), пункты (pt), пиксели (рх) и др. Перечислим несколько популярных.
Пиксели
Пиксель — это элементарная точка устройства. Размеры элементов веб-страницы, вроде изображений и колонок преимущественно делаются именно в пикселях, поэтому имеет смысл задавать и шрифт в этих единицах.
Пункты
Пожалуй, самая распространённая единица для указания размера шрифта. Многие люди привыкли задавать размер текста в текстовых редакторах, например 12. А что это число означает, не понимают. Так это и есть пункты, пожалуй, единственная величина не из метрической системы измерения, которая используется у нас повсеместно.
em
Эта единица показывает размер шрифта текущего элемента и он всегда равен 1em независимо от реального размера текста. Зачем тогда использовать? Em связан с размером шрифта родительского элемента и мы можем легко изменять размер текста самого элемента в большую (1.2em) или меньшую сторону (0.8em) без дополнительных вычислений. В каком-то смысле это является синонимом процентной записи.
rem
При использовании множественных вложений одних элементов в другие, с em легко запутаться в вычислениях. Например, если уменьшить размер шрифта до 0.8em, а потом у дочернего элемента увеличить до 1.2em, то будет ли текст одного размера? Единица rem привязана только к корневому элементу и таким образом не зависит от уровня вложения элементов.
В примере 1 задействовано сразу несколько единиц измерений.
Пример 1.
Изменение размеров текста
Результат данного примера показан на рис. 2.
Рис. 2. Задание размера для заголовка и основного текста
См. также
- <big>
- font-size
- Единицы размера в CSS
- Свойства шрифта в CSS
Автор и редакторы
Автор: Влад Мержевич
Последнее изменение: 11.03.2020
Редакторы: Влад Мержевич
Загрузка своего шрифта
Ctrl+←
Начертание
Ctrl+→
Размер шрифта в css: font-size
Размер шрифта в css: font-sizeНазад
Изменять размер шрифта необходимо для выделения определённого текста на фоне других, помечать важную информацию и наоборот, показывать, что текст менее значимый.
Всегда размер отличается у заголовков, подзаголовков и простого текста.
В языке CSS есть свойство, которое позволяет задаваться размеры: «font-size».
К примеру, зададим основной размер шрифта для сайта:
body{font-size: 14px;}
Мы указали, что по умолчанию размер шрифта на сайте равно 14px.
Также размер можно указывать в пунктах, процентах, ключевыми словами и в соотношении.
font-size: 14px; // в пикселях font-size: 12pt; // в пунктах font-size: 120%; // в процентах font-size: 1.2em; // В соотношении font-size: small; // Ключевым словом
Когда мы указываем размер в процентах или в соотношении, размер отталкивает от размера по умолчанию. К примеру, если у нас в <body> размер шрифта 14px, а для <p> мы указываем 110%, то эти проценты считаются от 14px у <body>, аналогично и с соотношением.
Ключевые слова:
- xx-small
- x-small
- small
- medium
- large
- x-large
- xx-large
Таблица рекомендуемых размеров шрифтов для сайта
| Тег | Рекомендуемый размер | В соотношении |
|---|---|---|
| body | 14 px | 1 em |
| p | 14 px | 1 em |
| h2 | 32 px | 2 em |
| h3 | 24 px | 1. 5 em |
| h3 | 19 px | 1.17 em |
Шрифты
« Предыдущая статья
Прозрачный фон на css: background
Следующая статья »
Фиксированный блок в css
Назад
Антиспам поле. Его необходимо скрыть через css
Ваше имя
Электронная почта
Ваше сообщение
Присылайте свои вопросы, предложения и пожелания на электронную почту. Будем рады сотрудничеству.
E-mail: [email protected]
Telegram: daruse93
Вы можете сказать спасибо автору сайта или перевести оплату.
Выделите опечатку и нажмите Ctrl + Enter, чтобы отправить сообщение об ошибке.
css — размер шрифта, высота строки и фактическая высота
Введение
Хороший вопрос,
Большинство этих вещей я узнаю на собственном опыте.
В этом случае для высоты DIV установлено значение auto. Он определит высоту своего собственного содержимого и оценит его новую высоту оттуда.
Очевидно, что DIV учитывает только высоту строки файла . Вероятно, это связано с разнообразием шрифтов. Line-height дает нам необходимую адаптируемость для различных типов шрифтов.
In Short
размер шрифта
Размер шрифта изменяет только сам шрифт, а не элементы div вокруг него
line-height
Высота строки и изменит элементы div вокруг него
Подождите секунду…
Если у нас есть что-то вроде этого:
div {
фон: зеленый;
поле сверху: 50 пикселей;
}
.тест-один {
размер шрифта: 20px
}
.тест-два {
размер шрифта: 40px
} <дел>
проверить один
Это связано с тем, что высота строки автоматически настраивается соответствующим образом, если она не установлена вручную.
