0:00
Как и было сказано в прошлом видео,
с помощью CSS мы можем влиять на такой параметр шрифта, как размер.
Конкретно в этом видео мы будем разбирать изменения размера шрифта, но также
существуют высота строки, расстояние между буквами и расстояние между словами,
которые нам также подвластны, но об этом в следующем видео.
Размер шрифта можно установить с помощью свойства font size, он определяется
как высота от базовой линии до верхней границы кегельной площадки.
Чтобы его установить, можно использовать либо ключевые слова,
либо единицы измерения длины.
Поговорим о ключевых словам,
они делятся на два набора значений: абсолютный и относительный.
Первый набор значений (абсолютный) состоит из семи значений: от xx-small до xx-large,
прямо как размеры одежды.
Вообще, по сути, они являются прямыми наследниками тега font с атрибутом size,
но с небольшим сдвигом, что видно из картинки.
Более того, они зависят от настроек браузера пользователя,
поэтому я не советую вам их использовать.
Следующий набор значений ключевых слов — относительные значения, smaller и larger.
Они изменяют размер шрифта относительно родителя примерно на 20 %.
Возьмем два тега: mark и strong.
mark установим font size larger, а stong — font size smaller, подразумевая то,
что все, что будет выделено желтым цветом, будет иметь размер шрифта больше, а все,
что жирным начертанием — меньше, что и видим на примере.
Но, как вы поняли из слова «примерно на 20 %», я вам также не советую
использовать данный тип значений, потому что они непредсказуемы.
Вторым типом значений для установки размера шрифта являются единицы
измерения длины.
Именно их я рекомендую использовать для данных целей.
Первой единицей измерения будет px,
так как задания динамического размера требуются нечасто.
Также эта единица измерения является наиболее популярной, как для шрифтов,
так и для установки размеров любых других элементов.
Возьмем параграф и установим свойства font size в 10 пикселей,
чтобы получить маленький шрифт, что и получаем в примере.
Следующая единица измерения длины — и % — устанавливают размер шрифта в зависимости
от размера шрифта родителя.
Возьмем div, которым установим свойства font size в значении .6em — это
будет то же самое, что 60 % в нашем случае.
Имеем такую верстку: два заголовка второго и третьего уровня, в каждом
из которых текст и div, на который мы только что с вами написали свойства.
В результате мы, зная то, что заголовки второго и третьего уровня изначально
имеют разные размеры шрифта, видим, что подписи к заголовку также неодинаковы,
потому что их значение было взято от значения шрифта родителя.
Различия между и % могут появиться только в зависимости от настроек браузера,
но об этом беспокоиться не стоит.
Ну и последняя единица измерения длины,
которую я вами рекомендую использовать — это rem.
Она, подобно наследует значения, но только корневого элемента HTML.
Имеем такой CSS-код: для тега HTML устанавливаем размер шрифта 16px,
для заголовка второго уровня — 60px, а для div — 2rem.
Имеет такую верстку: заголовок второго уровня, текст и div.
В примере видим то, что большой заголовок, как и было указано выше,
имеет размер 60px, а подпись к заголовку — не 120,
потому что rem берется именно от HTML, а именно 16 × 2 — 32px.
Как вы знаете, есть еще единицы измерения длины,
которые в контексте шрифтов я вам не рекомендую использовать.
Например, пики, пункты, ch и ex — это типографские единицы измерения,
которые перекочевали оттуда и практически не нужны в вебе.
Сантиметры, миллиметры, дюймы и четверти — это абсолютные единицы из реального мира.
Как ни странно, но в вебе они слишком непредсказуемы, но могут использоваться
для верстки печатных версий сайтов, например для установки полей.
vh, vw, vmin и wmax — это единицы измерения относительно viewport'а.
Данные единицы были в принципе придуманы не для того, чтобы управлять шрифтами.
Итак, в этом видео мы научились устанавливать размер шрифта.
В следующем видео мы научимся управлять расстоянием между словами,
буквами и высотой строки.
Мохов Олегразработчик интерфейсов, Яндекс
Артем Кувалдинразработчик интерфейсов, Яндекс
Олег Семичевразработчик интерфейсов, Яндекс
