Загрузка...

Веб-шрифты в CSS

Вы уже знаете font-family, размер и насыщенность. Веб-шрифты подгружают начертание, которого может не быть на устройстве посетителя — объявите его через @font-face, используйте имя семейства как любой другой шрифт и спокойно завершите запасным.

Части @font-face

📊 @font-face одним взглядом

Часть Повседневная роль
font-family Имя, которое вы придумываете и затем используете в CSS
src Где лежат файл(ы) шрифта (url(...) и часто format(...))
font-weight / font-style Какое начертание представляет этот файл (regular, bold, italic…)
font-display Как ведёт себя текст, пока шрифт грузится (например swap)

Два спокойных шага: зарегистрируйте начертание через @font-face, затем вызовите то же имя семейства в обычных правилах. Пропустите один — стек так и не найдёт свой файл.

Минимальный @font-face

Дайте начертанию понятное имя и укажите src на файл шрифта на вашем сайте (или CDN).

Базовый @font-face

css
CSS Code 
@font-face {
font-family: "Site Sans";
src: url("/fonts/site-sans.woff2") format("woff2");
font-weight: 400;
font-style: normal;
}

Предложите больше одного формата

Современные браузеры предпочитают woff2. Список woff следом покрывает более старые браузеры. Лучший формат — первым.

сначала woff2, потом woff

css
CSS Code 
@font-face {
font-family: "Site Sans";
src:
url("/fonts/site-sans.woff2") format("woff2"),
url("/fonts/site-sans.woff") format("woff");
font-weight: 400;
font-style: normal;
}

font-display — покажите текст раньше

font-display: swap позволяет браузеру сначала показать запасной текст, а затем подменить веб-шрифт, когда он придёт — часто лучше длинной невидимой дыры.

Display swap

css
CSS Code 
@font-face {
font-family: "Site Sans";
src: url("/fonts/site-sans.woff2") format("woff2");
font-weight: 400;
font-style: normal;
font-display: swap;
}

Используйте объявленное семейство

После @font-face вызывайте то же имя font-family в правилах — и держите общий запасной стек.

Применить своё семейство

css
CSS Code 
body {
font-family: "Site Sans", system-ui, "Segoe UI", sans-serif;
font-size: 1rem;
line-height: 1.6;
}

Спокойная привычка самостоятельного хостинга

Хостите только нужные насыщенности, предпочитайте woff2, задавайте font-display и всегда оставляйте системный/общий стек.

Заголовок с загруженным bold

css
CSS Code 
@font-face {
font-family: "Site Sans";
src: url("/fonts/site-sans-bold.woff2") format("woff2");
font-weight: 700;
font-style: normal;
font-display: swap;
}

h1 {
font-family: "Site Sans", Georgia, serif;
font-weight: 700;
}

Попробуйте сами

  1. Напишите блок @font-face с своим именем font-family и src типа woff2.
  2. Добавьте вторую строку src для woff.
  3. Задайте font-display: swap.
  4. Примените "Your Name", sans-serif к body.
  5. Если есть bold-файл, добавьте отдельный @font-face для веса 700 — затем font-weight: 700 на заголовке.

Частые ошибки

  • Объявить @font-face, но никогда не использовать то же имя в font-family
  • Пропустить запасной стек (ломается, если файл не загрузится)
  • Грузить много неиспользуемых насыщенностей и стилей (медленные страницы)
  • Долго оставлять текст невидимым без стратегии font-display
  • Смешивать этот урок с text-shadow / эффектами (они дальше)

Кратко

  • @font-face регистрирует своё имя семейства и указывает на файлы шрифта
  • Предпочитайте woff2, опционально с запасным woff
  • font-display: swap часто сохраняет читаемость текста при загрузке
  • Используйте то же имя семейства в CSS с системным/общим запасным
  • Грузите только нужные начертания; эффекты вроде text-shadow — следующий урок

🧠 Проверьте Свои Знания

Готов к Началу

Проверьте Свои Знания

Бросьте себе вызов с помощью этой интерактивной викторины и узнайте, насколько хорошо вы понимаете тему

❓
8
Вопросы
🎯
70%
Для Прохождения
♾️
∞
Время
🔄
∞
Попытки

📝 Инструкции

  • Внимательно прочитайте каждый вопрос
  • Выберите лучший ответ на каждый вопрос
  • Вы можете пересдавать тест столько раз, сколько захотите
  • Ваш прогресс будет показан вверху
Тема 28 из 35
Css Урок