font-family: гарнитура

Выбор шрифта: системный стек или веб-шрифт с запасными вариантами.

Уровень: начальный 10 разделов 8 минут

1. Что это и зачем

Выбор шрифта: системный стек или веб-шрифт с запасными вариантами.

Текст — главный интерфейс сайта, и CSS управляет каждым уровнем его восприятия: гарнитурой (font-family), крупностью (font-size), весом (font-weight), расстоянием между строками (line-height) и буквами (letter-spacing). Браузер комбинирует эти параметры при растеризации каждого глифа.

{title} — настройка, которую глаз пользователя замечает мгновенно, поэтому проверяйте её в реальном размере (100%).

2. Синтаксис и пример

body { font-family: "Segoe UI", Arial, sans-serif; }

Запись выше — базовый вариант использования. Обратите внимание, как font-family: гарнитура вписывается в структуру документа: рядом с другими элементами он ведёт себя по правилам каскада и наследования, которые разобраны в курсе CSS.

3. Нюансы и частые варианты

Размеры шрифтов удобно задавать в когерентных единицах (rem), а для заголовков — пропорционально через clamp(). Межстрочный интервал обычно 1.4–1.6 для текста и ниже для заголовков.

В реальной разметке font-family: гарнитура встречается в связке с другими тегами и классами: компонентная разметка (БЭМ) и переменные из базового CSS-курса помогают держать такие случаи под контролем без дублирования правил.

4. Как это работает под капотом

Текст — главный интерфейс сайта, и CSS управляет каждым уровнем его восприятия: гарнитурой (font-family), крупностью (font-size), весом (font-weight), расстоянием между строками (line-height) и буквами (letter-spacing). Браузер комбинирует эти параметры при растеризации каждого глифа.

{title} — настройка, которую глаз пользователя замечает мгновенно, поэтому проверяйте её в реальном размере (100%).
Если какое-то свойство ведёт себя неожиданно, откройте DevTools: вкладка Computed показывает, какие правила применились и откуда они пришли, а Box model — геометрию элемента.

5. Совместимость и поддержка

Системные шрифты доступны везде; веб-шрифты через WOFF2 с font-display: swap не блокируют отрисовку текста. Кириллица должна проверяться в конкретной гарнитуре.

Для современных возможностей придерживайтесь правила «fallback армии»: базовое значение — до, новая функция — после, а @supports для совсем свежих свойств.

6. Распространённые ошибки

Стек из нескольких гарнитур защищает от отсутствия нужной.
Цитируйте имена с пробелами: "Segoe UI", без — Arial.

7. Практическое задание

Настройте системный стек для всего сайта.

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

8. Как применять в проектах

Свойства шрифта формируют типографику всего документа: системные стеки, иерархия заголовков, межстрочные интервалы закладываются в переменные и переиспользуются на всех страницах.

Этот приём работает в связке с остальными: раскладку страниц собирают в уроке Flexbox и Grid, цвет и контраст — в Цвет и контраст, типографику — в Веб-типографика.

9. Чек-лист перед сдачей

Прогоните страницу через аудит производительности и доступности (Lighthouse в DevTools), чтобы поймать типовые промахи до публикации.

10. Как закрепить

Прочитав этот мини-урок, закрепите тему на практике: выполните задание, затем пройдитесь по базовым курсам {rel1t} и {rel2t}, а знания подрядчите на странице Тесты HTML и CSS. Если хотите собрать первый настоящий проект — в уроке Практика: лендинг весь процесс разобран по шагам.

← Вернуться к курсам