Шрифты и текст в CSS
В этой лекции мы разберём основные свойства CSS, которые отвечают за внешний вид текста: шрифт, размер, жирность, выравнивание, цвет, межстрочный интервал и дополнительные эффекты.
1. Цвет текста — color
Задаёт цвет текста. Способы задания мы уже изучили в лекции 2.
.purple {
color: #530899;
}Фиолетовый текст
2. Шрифт — font-family
Задаёт гарнитуру шрифта. Можно перечислять несколько через запятую — браузер выберет первый доступный. В конце указывают тип шрифта как запасной вариант.
Возможные значения:
- Название конкретного шрифта:
Arial,'Times New Roman','Courier New' serif— шрифт с засечками (Times New Roman)sans-serif— шрифт без засечек (Arial)monospace— моноширинный шрифт (Courier New)cursive— рукописный шрифтfantasy— декоративный шрифт
.sans {
font-family: Arial, sans-serif;
}
.serif {
font-family: 'Times New Roman', serif;
}
.mono {
font-family: 'Courier New', monospace;
}Arial, sans-serif
Times New Roman, serif
Courier New, monospace
3. Размер шрифта — font-size
Задаёт размер текста.
Возможные значения:
px— пиксели (абсолютный размер):16px,24pxrem— относительно корневого шрифта (<html>):1rem,1.5remem— относительно шрифта родителя:1em,1.5em%— проценты от родителя:100%,150%
.small {
font-size: 0.8rem;
}
.normal {
font-size: 1rem;
}
.large {
font-size: 1.5rem;
}0.8rem (мелкий текст)
1rem (обычный текст)
1.5rem (крупный текст)
4. Жирность — font-weight
Задаёт насыщенность шрифта.
Возможные значения:
normal— обычный (400)bold— жирный (700)- Числа от 100 до 900:
100(тонкий),300(светлый),400(normal),700(bold),900(очень жирный)
.normal {
font-weight: normal;
}
.bold {
font-weight: bold;
}
.extra-bold {
font-weight: 900;
}normal (400) — обычный текст
bold (700) — жирный текст
900 — очень жирный текст
5. Курсив — font-style
Включает курсивное начертание.
Возможные значения:
normal— обычныйitalic— курсив
.normal {
font-style: normal;
}
.italic {
font-style: italic;
}normal — обычный текст
italic — курсивный текст
6. Межстрочный интервал — line-height
Задаёт расстояние между строками текста. Рекомендуется использовать числа без единиц — они умножаются на размер шрифта.
Возможные значения:
- Число без единиц (рекомендуется):
1.2,1.5,2 - В пикселях:
24px - В процентах:
150%
.tight {
line-height: 1.2;
}
.normal-lh {
line-height: 1.5;
}
.loose {
line-height: 2;
}Вторая строка для наглядности
Вторая строка для наглядности
Вторая строка для наглядности
7. Выравнивание текста — text-align
Задаёт выравнивание текста внутри блока.
Возможные значения:
left— по левому краю (по умолчанию)center— по центруright— по правому краюjustify— по ширине (растягивает строки)
.left {
text-align: left;
}
.center {
text-align: center;
}
.right {
text-align: right;
}
.justify {
text-align: justify;
}left — по левому краю
center — по центру
right — по правому краю
justify — по ширине. Этот текст растягивается, чтобы занимать всю ширину блока.
8. Оформление текста — text-decoration
Добавляет линии над, под или через текст.
Возможные значения:
none— без оформления (по умолчанию)underline— подчёркнутый текстline-through— зачёркнутый текстoverline— линия сверху
.none {
text-decoration: none;
}
.underline {
text-decoration: underline;
}
.line-through {
text-decoration: line-through;
}
.overline {
text-decoration: overline;
}none — без оформления
underline — подчёркнутый текст
line-through — зачёркнутый текст
overline — линия сверху
9. Регистр текста — text-transform
Позволяет менять регистр текста без изменения HTML.
Возможные значения:
none— без изменений (по умолчанию)uppercase— все буквы заглавныеlowercase— все буквы строчныеcapitalize— первая буква каждого слова заглавная
.uppercase {
text-transform: uppercase;
}
.lowercase {
text-transform: lowercase;
}
.capitalize {
text-transform: capitalize;
}uppercase — все буквы ЗАГЛАВНЫЕ
lowercase — все буквы строчные
capitalize — Каждое Слово С Заглавной
10. Расстояние между буквами — letter-spacing
Увеличивает или уменьшает расстояние между символами.
Возможные значения: normal (по умолчанию), пиксели (2px),
em, rem.
.tight {
letter-spacing: -0.5px;
}
.normal-ls {
letter-spacing: normal;
}
.wide {
letter-spacing: 3px;
}letter-spacing: -0.5px (плотно)
letter-spacing: normal (обычно)
letter-spacing: 3px (широко)
11. Отступ первой строки — text-indent
Задаёт отступ первой строки абзаца (как «красная строка»).
Возможные значения: пиксели, em, проценты.
.indent {
text-indent: 2em;
}text-indent: 2em — это пример абзаца с отступом первой строки. Такой отступ часто используют в книгах и статьях.
12. Дополнительные свойства для работы с текстом
white-space — управление переносом строк
Возможные значения: normal (по умолчанию), nowrap (без
переносов), pre (как в теге <pre>), pre-wrap (с переносами).
.nowrap {
white-space: nowrap;
}✅ Текст не переносится, можно прокрутить вправо
text-overflow — многоточие для обрезанного текста
Работает только в паре с overflow: hidden и white-space: nowrap.
Возможные значения: clip (обрезать), ellipsis (многоточие).
.ellipsis {
width: 200px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}✅ Длинный текст заменяется на многоточие
word-break: break-all — принудительный разрыв
✅ Ссылка разрывается в любом месте
overflow-wrap: break-word — аккуратный перенос
✅ Слово переносится целиком, если есть место на новой строке
overflow-wrap: break-word.
white-space: nowrap часто применяется для заголовков и пунктов меню. А
text-overflow: ellipsis — для списков новостей и карточек товаров.