Шрифты в CSS
Вы уже умеете укладывать текст в строку. Шрифты выбирают, какие буквы вы видите — семейство гарнитуры, размер, насыщенность и наклон italic. Загрузка своих веб-шрифтов — следующий урок; здесь вы освоите основные свойства шрифта.
Инструменты шрифта одним взглядом
📊 Частые свойства шрифта
| Свойство | Повседневная роль |
|---|---|
font-family |
Называет стек гарнитур (плюс общий fallback) |
font-size |
Задаёт размер текста |
font-weight |
Задаёт жирность (напр. 400, 700, bold) |
font-style |
Задаёт normal или italic (и родственные стили) |
font (сокращение) |
Собирает стиль, вес, размер и семейство в одном объявлении |
Стеки font-family
Сначала перечислите предпочтительные шрифты, затем более безопасные запасные, и закончите общим семейством вроде sans-serif или serif, чтобы всегда что-то отрисовывалось.
Читаемый sans-serif стек
cssbody {
font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}Размер шрифта
font-size задаёт размер текста. Относительные единицы вроде rem часто спокойнее масштабируются со страницей; px и ключевые слова вроде large тоже работают.
Размеры заголовка и основного текста
cssh1 {
font-size: 2rem;
}
p {
font-size: 1rem;
}Насыщенность шрифта
font-weight управляет жирностью. Числовые веса (400, 700) или ключевые слова (normal, bold) обычны. Начертание должно поддерживать запрошенный вес.
Акцент весом
css.lead {
font-weight: 700;
}
.caption {
font-weight: 400;
}Стиль шрифта — italic
font-style: italic наклоняет текст, когда доступно курсивное начертание. Используйте для цитат или мягкого акцента, не для каждого абзаца.
Курсивная цитата
cssblockquote {
font-style: italic;
font-family: Georgia, "Times New Roman", serif;
}Сокращение font
Сокращение font может задать стиль, вес, размер и семейство вместе. Размер и семейство обязательны в форме, которую ожидают большинство браузеров.
Сокращение font на заголовке карточки
css.card-title {
font: italic 700 1.25rem Georgia, "Times New Roman", serif;
}Спокойная привычка для основного текста
Выберите ясный стек для страницы, чуть более сильный вес или размер для заголовков и держите основной текст удобным для чтения.
Базовая линия шрифта страницы
cssbody {
font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
font-size: 1rem;
font-weight: 400;
line-height: 1.6;
}
h2 {
font-family: Georgia, "Times New Roman", serif;
font-size: 1.5rem;
font-weight: 700;
}Попробуйте сами
- Задайте
bodysans-serif стек, заканчивающийся наsans-serif. - Дайте
h1большийfont-sizeиfont-weight: 700. - Оформите
blockquoteчерезfont-style: italicи serif-стек. - Перепишите заголовок сокращением
font. - Сравните тот же абзац в serif и sans-serif — заметьте смену настроения.
Частые ошибки
- Одно fancy-имя без fallback (ломается, если начертания нет)
- Огромные фиксированные
pxвезде без относительного мышления - Запрос
font-weight: 900, когда лицо отдаёт только regular и bold - Прыжок сюда в
@font-face/ хостинг веб-шрифтов (следующий урок) - Использование text-align или text-decoration, когда имелись в виду font-family или font-weight
Кратко
font-familyперечисляет стек и должен заканчиваться общим семействомfont-sizeзадаёт размер; относительные единицы часто масштабируются спокойноfont-weightиfont-styleдают жирный и курсивный акцент- Сокращение
fontупаковывает стиль, вес, размер и семейство - Держите ясный стек основного текста; загрузка своих веб-шрифтов — следующий урок
🧠 Проверьте Свои Знания
Проверьте Свои Знания
Бросьте себе вызов с помощью этой интерактивной викторины и узнайте, насколько хорошо вы понимаете тему
📝 Инструкции
- Внимательно прочитайте каждый вопрос
- Выберите лучший ответ на каждый вопрос
- Вы можете пересдавать тест столько раз, сколько захотите
- Ваш прогресс будет показан вверху