Веб-шрифты и @font-face

Тренажер по CSS для пользователей с начальным уровнем подготовки.

Опубликовано 17.03.2025
Просмотры 17
Автор
Рек. время прохождения 5 минут
Упражнений 14
Комментарии 0
Тренажер CSS

В этой серии заданий вы попрактикуетесь в подключении и использовании пользовательских веб-шрифтов с помощью правила CSS `@font-face`. Задания охватывают основы определения шрифта, указания его источника, формата, веса и стиля, а также применение подключенных шрифтов к элементам на веб-странице. Сложность заданий постепенно возрастает, начиная с базового синтаксиса `@font-face` и заканчивая определением нескольких начертаний одного шрифта.

Список тем

Подключение веб-шрифта: начало

Для подключения пользовательского шрифта на веб-странице используется специальное CSS-правило. Ваша задача — вставить пропущенное имя этого правила, чтобы объявить блок для определения нового шрифта.

CSS
input1 {
  font-family: "MyCustomFont";
  src: url("https://naytikurs.ru/assets/themes/naytikurs/fonts/OpenSans-Regular.woff2");
}

.text {
  font-family: "MyCustomFont", sans-serif;
  font-size: 18px;
}
HTML
<p class="text">Этот текст должен использовать пользовательский шрифт.</p>
Чтобы определить блок для настройки пользовательского шрифта, используется специальное правило, начинающееся с символа '@'. Вспомните или найдите, как называется это правило.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку

Указание имени шрифта

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

CSS
@font-face {
  input1: "OpenSansRegular";
  src: url("https://naytikurs.ru/assets/themes/naytikurs/fonts/OpenSans-Regular.woff2");
}

.text-regular {
  font-family: "OpenSansRegular", sans-serif;
  font-size: 18px;
}
HTML
<p class="text-regular">Этот текст использует шрифт Open Sans Regular.</p>
Найдите свойство внутри `@font-face`, которое используется для присвоения имени подключаемому шрифту. Это имя затем используется в свойстве `font-family` для применения шрифта к элементам.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку

Указание источника шрифта

Чтобы браузер знал, где найти файл шрифта, используется свойство `src`. Вставьте пропущенное имя этого свойства в правило `@font-face`.

CSS
@font-face {
  font-family: "OpenSansRegular";
  input1: url("https://naytikurs.ru/assets/themes/naytikurs/fonts/OpenSans-Regular.woff2");
}

.text-regular {
  font-family: "OpenSansRegular", sans-serif;
  font-size: 18px;
}
HTML
<p class="text-regular">Этот текст использует шрифт Open Sans Regular.</p>
Вспомните или найдите свойство внутри `@font-face`, которое определяет путь (URL) к файлу шрифта. Оно обычно содержит функцию `url()`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку

Использование функции url()

Путь к файлу шрифта внутри свойства `src` указывается с помощью специальной функции. Вставьте пропущенное имя этой функции, чтобы правильно указать URL шрифта.

CSS
@font-face {
  font-family: "OpenSansRegular";
  src: input1("https://naytikurs.ru/assets/themes/naytikurs/fonts/OpenSans-Regular.woff2");
}

.text-regular {
  font-family: "OpenSansRegular", sans-serif;
  font-size: 18px;
}
HTML
<p class="text-regular">Этот текст использует шрифт Open Sans Regular.</p>
Для указания пути к ресурсу (в данном случае, файлу шрифта) в CSS используется функция, принимающая URL в качестве аргумента. Вспомните ее название.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку

Указание формата шрифта

Чтобы помочь браузеру быстрее определить тип шрифта, можно указать его формат с помощью функции `format()`. Вставьте пропущенное имя этой функции после URL шрифта.

CSS
@font-face {
  font-family: "OpenSansRegular";
  src: url("https://naytikurs.ru/assets/themes/naytikurs/fonts/OpenSans-Regular.woff2") input1("woff2");
}

.text-regular {
  font-family: "OpenSansRegular", sans-serif;
  font-size: 18px;
}
HTML
<p class="text-regular">Этот текст использует шрифт Open Sans Regular.</p>
После `url()` в свойстве `src` можно добавить указание на формат файла шрифта. Для этого используется специальная функция, принимающая строку с названием формата (например, 'woff2', 'truetype').
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку

Указание значения формата шрифта

Файл шрифта по ссылке имеет формат WOFF2. Укажите это значение внутри функции `format()`, чтобы браузер знал тип файла.

CSS
@font-face {
  font-family: "OpenSansRegular";
  src: url("https://naytikurs.ru/assets/themes/naytikurs/fonts/OpenSans-Regular.woff2") format(input1);
}

.text-regular {
  font-family: "OpenSansRegular", sans-serif;
  font-size: 18px;
}
HTML
<p class="text-regular">Этот текст использует шрифт Open Sans Regular.</p>
Функция `format()` принимает строку, описывающую формат шрифта. Для файлов с расширением .woff2 используется определенное значение. Укажите его в кавычках.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку

Применение подключенного шрифта

Теперь, когда шрифт 'OpenSansRegular' определен через `@font-face`, примените его к элементу с классом `text-regular`. Вставьте пропущенное имя свойства, которое отвечает за установку шрифта для текста.

CSS
@font-face {
  font-family: "OpenSansRegular";
  src: url("https://naytikurs.ru/assets/themes/naytikurs/fonts/OpenSans-Regular.woff2") format("woff2");
}

.text-regular {
  input1: "OpenSansRegular", sans-serif;
  font-size: 18px;
}
HTML
<p class="text-regular">Этот текст использует шрифт Open Sans Regular.</p>
Чтобы применить шрифт к элементу, используется то же свойство, что и для задания имени шрифта внутри `@font-face`. Укажите имя шрифта ('OpenSansRegular'), которое вы определили ранее, в качестве значения этого свойства. Не забудьте добавить запасной универсальный шрифт (например, `sans-serif`).
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку

Подключение жирного начертания

Часто шрифты имеют несколько начертаний (например, обычное и жирное). Подключите жирное начертание шрифта Open Sans, используя второе правило `@font-face`. Укажите правильное имя свойства для задания жирности шрифта.

CSS
@font-face {
  font-family: "OpenSans";
  src: url("https://naytikurs.ru/assets/themes/naytikurs/fonts/OpenSans-Regular.woff2") format("woff2");
  font-weight: normal; /* Обычное начертание */
}

@font-face {
  font-family: "OpenSans";
  src: url("https://naytikurs.ru/assets/themes/naytikurs/fonts/OpenSans-Bold.woff2") format("woff2");
  input1: bold; /* Жирное начертание */
}

.text-bold {
  font-family: "OpenSans", sans-serif;
  font-weight: bold;
  font-size: 18px;
}
HTML
<p class="text-bold">Этот текст должен использовать жирное начертание Open Sans.</p>
Внутри `@font-face` можно указать, какому начертанию (по жирности) соответствует данный файл шрифта. Для этого используется свойство, аналогичное тому, что применяется для установки жирности текста элемента. Используйте значение `bold` или `700`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку

Указание числового значения жирности

Жирность шрифта можно указывать не только ключевыми словами (`normal`, `bold`), но и числами от 100 до 900. Укажите числовое значение, соответствующее жирному начертанию (`bold`), для свойства `font-weight`.

CSS
@font-face {
  font-family: "OpenSans";
  src: url("https://naytikurs.ru/assets/themes/naytikurs/fonts/OpenSans-Regular.woff2") format("woff2");
  font-weight: 400; /* normal = 400 */
}

@font-face {
  font-family: "OpenSans";
  src: url("https://naytikurs.ru/assets/themes/naytikurs/fonts/OpenSans-Bold.woff2") format("woff2");
  font-weight: input1; /* bold = ? */
}

.text-bold {
  font-family: "OpenSans", sans-serif;
  font-weight: bold; /* или 700 */
  font-size: 18px;
}
HTML
<p class="text-bold">Этот текст должен использовать жирное начертание Open Sans.</p>
Стандартное жирное начертание обычно соответствует числовому значению 700. Вставьте это число в качестве значения свойства `font-weight`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку

Применение жирного начертания к тексту

Теперь, когда оба начертания шрифта 'OpenSans' (обычное и жирное) определены, примените жирное начертание к элементу с классом `text-bold`. Вставьте пропущенное имя свойства, отвечающего за жирность текста.

CSS
@font-face {
  font-family: "OpenSans";
  src: url("https://naytikurs.ru/assets/themes/naytikurs/fonts/OpenSans-Regular.woff2") format("woff2");
  font-weight: normal;
}

@font-face {
  font-family: "OpenSans";
  src: url("https://naytikurs.ru/assets/themes/naytikurs/fonts/OpenSans-Bold.woff2") format("woff2");
  font-weight: bold;
}

.text-bold {
  font-family: "OpenSans", sans-serif;
  input1: bold;
  font-size: 18px;
}
HTML
<p class="text-bold">Этот текст должен использовать жирное начертание Open Sans.</p>
Чтобы текст отображался жирным начертанием, используется свойство `font-weight`. Установите его значение в `bold` или `700`. Браузер автоматически выберет подходящий файл шрифта, определенный в `@font-face` с соответствующим `font-weight`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку

Использование разных начертаний

У нас определены два начертания для шрифта 'OpenSans'. Примените обычное начертание к элементу с классом `text-normal` и жирное к элементу с классом `text-bold`, используя одно и то же имя шрифта `OpenSans`, но разные значения `font-weight`.

CSS
@font-face {
  font-family: "OpenSans";
  src: url("https://naytikurs.ru/assets/themes/naytikurs/fonts/OpenSans-Regular.woff2") format("woff2");
  font-weight: normal; /* 400 */
}

@font-face {
  font-family: "OpenSans";
  src: url("https://naytikurs.ru/assets/themes/naytikurs/fonts/OpenSans-Bold.woff2") format("woff2");
  font-weight: bold; /* 700 */
}

.text-normal {
  font-family: "OpenSans", sans-serif;
  font-weight: input1;
  font-size: 18px;
}

.text-bold {
  font-family: "OpenSans", sans-serif;
  font-weight: bold;
  font-size: 18px;
}
HTML
<p class="text-normal">Это обычный текст Open Sans.</p>
<p class="text-bold">Это жирный текст Open Sans.</p>
Для обоих классов (`.text-normal` и `.text-bold`) используйте `font-family: "OpenSans", sans-serif;`. Затем для `.text-normal` установите `font-weight: normal;` (или `400`), а для `.text-bold` установите `font-weight: bold;` (или `700`). Вставьте пропущенное значение `font-weight` для обычного текста.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку

Указание стиля шрифта (font-style)

Помимо жирности, `@font-face` позволяет указывать и стиль шрифта (например, курсив). Хотя у нас нет курсивного файла, добавьте свойство `font-style` со значением `normal` для явного указания обычного стиля в первом правиле `@font-face`.

CSS
@font-face {
  font-family: "OpenSans";
  src: url("https://naytikurs.ru/assets/themes/naytikurs/fonts/OpenSans-Regular.woff2") format("woff2");
  font-weight: normal;
  input1: normal;
}

@font-face {
  font-family: "OpenSans";
  src: url("https://naytikurs.ru/assets/themes/naytikurs/fonts/OpenSans-Bold.woff2") format("woff2");
  font-weight: bold;
  font-style: normal;
}

.text {
  font-family: "OpenSans", sans-serif;
  font-size: 18px;
}
HTML
<p class="text">Текст с явно указанным стилем normal.</p>
Свойство `font-style` в `@font-face` определяет стиль шрифта (normal, italic, oblique). Добавьте `font-style: normal;` в первое правило `@font-face`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку

Исправление ошибки в src

В правиле `@font-face` допущена ошибка: пропущена часть синтаксиса для указания URL и формата. Дополните строку `src`, чтобы она правильно включала `url(...)` и `format(...)`.

CSS
@font-face {
  font-family: "OpenSansRegular";
  src: input1("https://naytikurs.ru/assets/themes/naytikurs/fonts/OpenSans-Regular.woff2") input2("woff2");
}

.text-regular {
  font-family: "OpenSansRegular", sans-serif;
  font-size: 18px;
}
HTML
<p class="text-regular">Этот текст использует шрифт Open Sans Regular.</p>
Свойство `src` должно содержать `url("путь/к/шрифту")`, за которым следует `format("формат")`. Убедитесь, что обе функции присутствуют и правильно записаны.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку

Применение шрифта к заголовку

Подключите жирное начертание шрифта Open Sans под именем 'OpenSansBold' и примените его к заголовку `h1`. Заполните пропуски в селекторе и свойстве `font-family`.

CSS
@font-face {
  font-family: "OpenSansBold";
  src: url("https://naytikurs.ru/assets/themes/naytikurs/fonts/OpenSans-Bold.woff2") format("woff2");
  font-weight: bold;
}

input1 {
  input2: "OpenSansBold", sans-serif;
}
HTML
<h1>Заголовок с жирным шрифтом</h1>
<p>Обычный текст параграфа.</p>
Сначала определите шрифт 'OpenSansBold' с помощью `@font-face`, указав путь к жирному начертанию и `font-weight: bold;`. Затем создайте правило для селектора `h1` и используйте `font-family: "OpenSansBold", sans-serif;`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку
Предыдущая темаСледующая тема
НайтиКурс.Ру