Высота строки. Расстояние между буквами и словами

Loading...

Из курса от партнера Moscow Institute of Physics and Technology

Основы HTML и CSS

116 оценки

Moscow Institute of Physics and Technology

Основы HTML и CSS

116 оценки

Курс 2 из 5 — Specialization Разработка интерфейсов: вёрстка и JavaScript

HTML и CSS — языки, с помощью которых верстают страницы в интернете. Овладеть основами этих языков совсем нетрудно — это первый шаг к профессии веб-разработчика. Вначале вы узнаете, как работать со шрифтами и текстом, а в конце концов научитесь верстать несложные страницы с анимацией и без. Авторы курса — разработчики из Яндекса. У курса есть продолжение.

Из урока

Шрифты и текст

Четвёртая неделя курса посвящена работе со шрифтами и текстом. Вы узнаете о проблемах, связанных с использованием нестандартных шрифтов, и способах их решения. Научитесь управлять выводом шрифтов, применять цвет для текста, а ещё создавать интересные эффекты с помощью тени. Узнаете, как реализовать многоколоночную развёртку, а также как грамотно обходить проблему переполнения текста. Полученных навыков вам хватит, чтобы сверстать собственную газету.

Что такое шрифт? Анатомия шрифта4:44

Размер шрифта4:02

Высота строки. Расстояние между буквами и словами3:42

Начертание шрифта3:08

Семейства шрифтов. Проблемы использования нестандартных шрифтов8:50

Свойство font1:11

Базовые свойства для работы с текстом6:53

Многоколоночность и переполнение текста4:11

Форматирование пробелов и переносов в тексте5:31

Псевдоэлементы2:10

Познакомьтесь с преподавателями

Мохов Олег
разработчик интерфейсов, Яндекс
Артем Кувалдин
разработчик интерфейсов, Яндекс
Олег Семичев
разработчик интерфейсов, Яндекс

В этом видео мы научимся устанавливать высоту строки,

расстояние между буквами и словами, а также разберем нюансы их использования.

Поехали.

Высота строки устанавливается свойством line height двумя типами значений:

единицами измерения длины или множителем.

В чем же разница?

Возьмем CSS-код, у тега body мы устанавливаем размер шрифта 20 пикселей,

а также возьмем три класса, у каждого из которых высота строки установлена в

множитель 1,5; 1,5em и 30px.

Имеем такую верстку: три div, в каждом из которых по параграфу,

и у каждого div один из вышеописанных классов.

Имеем такой результат: у первого параграфа высота строки множителем

20 * 1,5 = 30, потому что у тега body размер шрифта 20px.

У следующего: 1,5em * 20 — также 30px.

Ну и у третьего параграфа 30px = 30px.

Разницы, как вы видите, никакой.

Ну что если мы захотим изменить размер шрифта конкретно у параграфов?

Возьмем тот же самый CSS, ту же самую верстку,

но для параграфов установим размер шрифта в 30px.

Получим результат, отличный от предыдущего.

Почему так?

Давайте разберемся.

У первого параграфа, как мы видим, высота строки больше, чем у остальных.

Потому что множитель взял размер шрифта параграфа, а не тега body.

Это очень важный нюанс.

В итоге мы получаем высоту строки 45px.

У второго параграфа, естественно, 20px от body * 1,5 = 30.

Ну и у третьего параграфа, как это не удивительно, 30px так и осталось.

В этом вся разница.

Я вам советую использовать всегда проценты,

в отличие от или px, так как они более настраиваемые.

Перейдем к следующему свойству, которое устанавливает расстояние между буквами,

это свойство letter-spacing.

Устанавливать значение можно в любой единице измерения длины, кроме процентов.

Имеем такой CSS-код: три параграфа, три класса.

У первого letter-spacing — normal, это значение по умолчанию.

У второго letter-spacing — −2,5px.

А у третьего letter-spacing — 1em.

Следует заметить, что отрицательные значения также можно устанавливать.

В результате имеем вот такую вот верстку.

letter-spacing normal у первого параграфа ничего не поменял.

У второго letter-spacing — −2,5px, что как бы склеило буквы друг к другу.

И letter-spacing 1em, наоборот, растянуло расстояние между буквами,

и мы получаем вот такой результат.

Аналогичным свойству letter-spacing является свойство word-spacing,

которое устанавливает расстояние между словами.

Также можете использовать значение в любой единице измерения длины, кроме процентов.

Берем так же первый параграф и устанавливаем word-spacing normal,

что является значением по умолчанию.

Второму параграфу word-spacing — −10px, здесь, кстати,

также можно использовать отрицательные значения единиц измерения длины.

И у третьего параграфа устанавливаем word-spacing в 1em.

И получаем следующий результат.

Первый параграф — normal.

Второй параграф — −10px, что как бы склеило слова, а не буквы,

как было с прошлым свойством.

И третий параграф имеет word-spacing 1em,

что раздвинуло слова по отношению друг к другу.

Подводя итог.

В прошлом видео мы научились устанавливать размер шрифта.

В этом — управлять высотой строки и расстояние между буквами и словами.

И это все, что хотелось бы рассказать об управлении размерами в контексте шрифтов.

В следующем видео мы разберемся,

как управлять начертанием и плотностью шрифтов.

Ознакомьтесь с нашим каталогом

Присоединяйтесь бесплатно и получайте персонализированные рекомендации, обновления и предложения.

Coursera делает лучшее в мире образование доступным каждому, предлагая онлайн-курсы от ведущих университетов и организаций.

© Coursera Inc., 2018 Все права защищены.

Загрузить из App Store

Загрузить в Google Play