Свойства font-size и line-height
Здесь мы рассмотрим, как соотносятся размеры шрифта и строки, и как их правильно задавать.
font-size и line-height
- font-size – размер шрифта, в частности, определяющий высоту букв.
- line-height – высота строки.
Для наглядности посмотрим пример HTML, в котором шрифт и размер строки одинаковы:
body Ёрш р Ёрш ЁРазмер шрифта font-size – это абстрактное значение, которое привязано к шрифту, и даётся в типографских целях.
Обычно оно равно расстоянию от самой верхней границы букв до самой нижней, исключая «нижние хвосты» букв, таких как p , g . Как видно из примера выше, при размере строки, равном font-size , строка не будет размером точно «под букву».
В зависимости от шрифта, «хвосты» букв при этом могут вылезать, правые буквы Ё и р в примере выше пересекаются как раз поэтому.
В некоторых особо размашистых шрифтах «хвосты букв» могут быть размером с саму букву, а то и больше. Но это, всё же исключение.
Обычно размер строки делают чуть больше, чем шрифт.
По умолчанию в браузерах используется специальное значение line-height:normal .
Оно означает, что браузер может принимать решение о размере строки самостоятельно. Как правило, оно будет в диапазоне 1.1 — 1.25 , но стандарт не гарантирует этого, он говорит лишь, что оно должно быть «разумным» (дословно – англ. reasonable).
Множитель для line-height
Значение line-height можно указать при помощи px или em , но гораздо лучше – задать его числом.
Значение-число интерпретируется как множитель относительно размера шрифта. Например, значение с множителем line-height: 2 при font-size: 16px будет аналогично line-height: 32px (=16px*2) .
Однако, между множителем и точным значением есть одна существенная разница.
- Значение, заданное множителем, наследуется и применяется в каждом элементе относительно его размера шрифта. То есть, line-height: 2 означает, что высота строки будет равна удвоенному размеру шрифта, не важно какой шрифт.
- Значение, заданное в единицах измерения, запоминается и наследуется «как есть». Это означает, что line-height: 32px будет всегда жёстко задавать высоту строки, даже если шрифт во вложенных элементах станет больше или меньше текущего.
Давайте посмотрим, как это выглядит, на примерах:
стандартная строка шрифт в 2 раза больше
шрифт в 2 раза больше Какое свойство отвечает за высоту шрифта
Для установки размера шрифта используется свойство font-size :
В данном случае высота шрифта составит 18 пикселей. Пиксели представляют наиболее часто используемые единицы измерения. Чтобы задать значение в пикселях, после самого значения идет сокращение «px».
Если к тексту явным образом не применяется высота шрифта, то используются значения браузера по умолчанию. Например, для простого текста в параграфах это 16 пикселей. Это базовый стиль текста.
Базовый стиль для разных элементов текста отличается: если для параграфов это 16 пикселей, то для заголовков h1 это 32 пикселя, для заголовков h2 — 24 пикселя и т..д.
Для измерения шрифта также можно использовать самые разные единицы измерения.
Ключевые слова
В CSS имеется семь ключевых слов, которые позволяют назначить размер шрифта относительно базового:
- medium : базовый размер шрифта браузера (16 пикселей)
- small : 13 пикселей
- x-small : 10 пикселей
- xx-small : 9 пикселей
- large : 18 пикселей
- x-large : 24 пикселя
- xx-large : 32 пикселя
font-size: x-large;
Проценты
Проценты позволяют задать значение относительно базового или унаследованного шрифта. Например:
font-size: 150%;
В данном случае высота шрифта будет составлять 150% от базового, то есть 16px * 1,5 = 24px
Наследование шрифта может изменить финальное значение. Например, следующую ситуацию:
Шрифты в CSS3 div pОднажды в студеную зимнюю пору
Здесь элемент p наследует от контейнера — блока div шрифт высотой в 10 пикселей. То есть 10 пикселей теперь будет базовым для параграфа.
Далее для элемента p определяется новая высота шрифта в 150%. Это значит, что финальная высота будет равна 10px * 1,5 = 15px.
Единица еm
Единица измерения еm во многом эквивалентна процентам. Так, 1em равен 100% , .5em равно 50% и т.д.
line-height
Устанавливает интерлиньяж (межстрочный интервал) текста, отсчет ведется от базовой линии шрифта. При обычных обстоятельствах расстояние между строками зависит от вида и размера шрифта и определяется браузером автоматически. Отрицательное значение межстрочного расстояния не допускается.
Синтаксис
line-height: множитель | значение | проценты | normal | inherit
Значения
Любое число больше нуля воспринимается как множитель от размера шрифта текущего текста. Например, значение 1.5 устанавливает полуторный межстрочный интервал. В качестве значений принимаются также любые единицы длины, принятые в CSS — пикселы (px), дюймы (in), пункты (pt) и др. Разрешается использовать процентную запись, в этом случае за 100% берется высота шрифта.
normal Расстояние между строк вычисляется автоматически. inherit Наследует значение родителя.
HTML5 CSS2.1 IE Cr Op Sa Fx
line-height h1 < line-height: 60%; >p Duis te feugifacilisi
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Результат данного примера показан на рис. 1.
Рис. 1. Применение свойства line-height
Объектная модель
[window.]document.getElementById(» elementID «).style.lineHeight
Браузеры
Internet Explorer до версии 7.0 неправильно вычисляет высоту строк для изображений и элементов форм. Также в этом браузере не поддерживается значение inherit .
Свойство font-size, размер шрифта
В прошлой части мы познакомились с основными механизмами CSS, но не рассматривали подробности работы отдельных CSS-свойств. Поэтому в этой части вас ожидает полное погружение в CSS. А начнём его с оформления основы любой страницы в интернете — а именно с оформления текста.
Самый главный «текстовый» параметр, которым можно управлять — это шрифт. Какой именно задан шрифт, какого он размера, начертания и насыщенности — разберём эти свойства по порядку.
Размером шрифта управляет свойство font-size . Значение свойства задаёт желаемую высоту символа шрифта. Причём единицы измерения могут быть абсолютными или относительными. Мы уже рассматривали единицы измерения в одном из заданий прошлой части, при работе с размерами шрифта они также актуальны.
Самая часто используемая единица измерения размера шрифта — пиксели px :
На самом деле абсолютную величину размера шрифта можно задавать не только в пикселях, пунктах и других величинах, но и особыми «шрифтовыми» ключевыми словами: xx-small , x-small , small , medium , large , x-large и xx-large . На практике этими единицами измерения пользуются редко. Подробно об этих ключевых словах можно узнать в спецификации.
Перейти к заданию
- index.html Сплит-режим
- style.css Сплит-режим