Свойства 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 раза больше Размер шрифта в CSS. Единицы измерения px, %, em
Для обозначения размера шрифта в CSS необходимо указать соответствующее свойство и его значение. Размер шрифта определяется свойством font-size , для которого может быть установлен один из нескольких вариантов значений. Можно задать размер шрифта в пикселях, процентах, с помощью ключевых слов и т. д. Все это мы рассмотрим далее в этой подглаве, а сейчас взгляните на примеры задания размера шрифта:
/* в процентах: */ h1 < font-size: 100%; >/* в единицах измерения em: */ h2 < font-size: 1em; >/* в пикселях: */ h3 < font-size: 18px; >/* с помощью ключевого слова: */ p
Размер шрифта в пикселях
Наиболее простой и понятный способ задать размер шрифта – использовать единицу измерения px . Вы сами указываете высоту шрифта. Допустим, вам необходим шрифт размером 24 пикселя. Для этого запишите стиль CSS:
font-size: 24px;
Размер шрифта в процентах
Вы наверняка уже сталкивались с ситуацией, когда размер шрифта в CSS не задан, вследствие чего браузеру приходится определять размер шрифта «по своему усмотрению». Если точнее, берется предустановленное значение по умолчанию. Именно от него зависят установленные в процентах значения. Например, базовый размер основного текста p , как правило, равняется 16 пикселям. Значение 100% эквивалентно базовому размеру шрифта, который предустановлен в браузере. Поэтому:
p < font-size: 100%; >/* . то же самое, что и значение в браузере по умолчанию: */ p
Если же в этом случае задать размер шрифта 50% , то он будет равен половине базового размера. Значение 200% , наоборот, увеличит шрифт в два раза.
Важно: процентные значения размера шрифта наследуются. Например, если для родительского тега задан размер шрифта 150%, то все вложенные в него теги также унаследуют это значение.
Единица измерения em
По принципу работы единица измерения em похожа на проценты. Значение 1em эквивалентно 100% и соответствует базовому размеру шрифта по умолчанию. Соответственно, 0.6em = 60% , 3em = 300% и так далее. Пример записи:
font-size: 0.9em; /* перед точкой можно опустить ноль: */ font-size: .9em;
Значения размеров шрифтов, указанные в em , наследуются (как и проценты). Это создает некоторые трудности при работе с CSS. Например, если для родительского элемента div задан размер шрифта 2em , то для вложенного в него такого же элемента div шрифт будет увеличен еще в два раза. Наглядный пример можно увидеть на скриншоте:
В качестве альтернативы можно воспользоваться новой единицей измерения, введенной в CSS3 – rem , которая всегда отталкивается от базового размера шрифта. Если в нашем примере изменить значение div с 2em на 2rem , то размер шрифта вложенного элемента div станет таким же, так у родительского. Недостатком единицы измерения rem является то, что она не поддерживается некоторыми браузерами, а именно Internet Explorer версии 8 (и ранее), а также Opera Mini 8.
Ключевые слова
Задать размер текста CSS можно и с помощью специальных ключевых слов, которые также зависят от базового размера шрифта в браузере. Если ориентироваться на стандартный размер шрифта для основного текста (16 пикселей) и не брать во внимание случаи, когда базовый размер был изменен, то таблица ниже показывает соответствие между ключевым словом и размером шрифта в пикселях:
| Ключевое слово | Размер в пикселях |
|---|---|
| xx-small | 9px |
| x-small | 10px |
| small | 13px |
| medium | 16px |
| large | 19px |
| x-large | 24px |
| xx-large | 32px |
Как видим, значение medium соответствует базовому размеру шрифта 16px . Использование ключевых слов ограничивает возможности и лишает гибкости, поэтому профессиональные разработчики не применяют их.
Завершение
В этой подглаве вы узнали, как задать размер шрифта в CSS. Также мы рассмотрели те единицы измерения, которые наиболее часто используются для установки размера шрифта в таблицах стилей. Для этих целей могут сгодиться и другие единицы измерения CSS, такие как дюймы in , сантиметры cm , миллиметры mm . Но они не слишком хорошо подходят для определения размера текста на веб-страницах, отображаемых на мониторе.
Читайте далее: как установить жирный шрифт и курсив в CSS.
Относительный размер шрифта
Абсолютные величины применительно к размеру шрифта — это простое, но не совсем гибкое решение и применяется для самых простых случаев.
К примеру, для всего документа задан размер шрифта:
body
В задании про наследование мы разбирали, что все дочерние элементы с необъявленным значением размера шрифта унаследуют этот размер, то есть 16px .
Заголовку на странице мы зададим другое фиксированное значение размера шрифта:
Пока что всё хорошо. Но представьте, что теперь появляется требование: на больших экранах мониторов увеличить размер шрифта документа с 16px до 20px . Если поменять размер у body , то у «наследников» размер тоже изменится. Но у заголовка размер никак не поменяется, он будет фиксированным — 32px .
Хочется сделать так, чтобы при изменении основного размера шрифта для родителя (в нашем случае это body ), его дочерние элементы пропорционально меняли свои размеры шрифта. И для этого случая есть специальная единица измерения — em .
Величина 1em — это такой же размер шрифта, что и у родителя. Соответственно, если мы хотим, чтобы шрифт дочернего элемента был всегда в 2 раза больше родительского, то зададим значение 2em :
Такой подход к написанию стилей позволяет сделать код более гибким.
Наравне с «абсолютными» ключевыми словами существует пара «относительных» ключевых слов, которые применяются к размеру шрифта: larger и smaller . Они буквально делают размер шрифта элемента больше или меньше того размера, который задан его родительскому элементу. Подробно об этих ключевых словах можно узнать в спецификации.
Перейти к заданию
- index.html Сплит-режим
- style.css Сплит-режим
Свойство font-size, размер шрифта
В прошлой части мы познакомились с основными механизмами CSS, но не рассматривали подробности работы отдельных CSS-свойств. Поэтому в этой части вас ожидает полное погружение в CSS. А начнём его с оформления основы любой страницы в интернете — а именно с оформления текста.
Самый главный «текстовый» параметр, которым можно управлять — это шрифт. Какой именно задан шрифт, какого он размера, начертания и насыщенности — разберём эти свойства по порядку.
Размером шрифта управляет свойство font-size . Значение свойства задаёт желаемую высоту символа шрифта. Причём единицы измерения могут быть абсолютными или относительными. Мы уже рассматривали единицы измерения в одном из заданий прошлой части, при работе с размерами шрифта они также актуальны.
Самая часто используемая единица измерения размера шрифта — пиксели px :
На самом деле абсолютную величину размера шрифта можно задавать не только в пикселях, пунктах и других величинах, но и особыми «шрифтовыми» ключевыми словами: xx-small , x-small , small , medium , large , x-large и xx-large . На практике этими единицами измерения пользуются редко. Подробно об этих ключевых словах можно узнать в спецификации.
Перейти к заданию
- index.html Сплит-режим
- style.css Сплит-режим