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

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

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

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

Список тем

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

id: 37374_webfonts-01

Для подключения пользовательского шрифта на веб-странице используется специальное 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>
Чтобы определить блок для настройки пользовательского шрифта, используется специальное правило, начинающееся с символа '@'. Вспомните или найдите, как называется это правило.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

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

id: 37374_webfonts-02

Внутри правила `@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` для применения шрифта к элементам.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

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

id: 37374_webfonts-03

Чтобы браузер знал, где найти файл шрифта, используется свойство `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()

id: 37374_webfonts-04

Путь к файлу шрифта внутри свойства `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 в качестве аргумента. Вспомните ее название.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

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

id: 37374_webfonts-05

Чтобы помочь браузеру быстрее определить тип шрифта, можно указать его формат с помощью функции `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').
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

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

id: 37374_webfonts-06

Файл шрифта по ссылке имеет формат 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 используется определенное значение. Укажите его в кавычках.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

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

id: 37374_webfonts-07

Теперь, когда шрифт '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`).
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

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

id: 37374_webfonts-08

Часто шрифты имеют несколько начертаний (например, обычное и жирное). Подключите жирное начертание шрифта 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`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

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

id: 37374_webfonts-09

Жирность шрифта можно указывать не только ключевыми словами (`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`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

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

id: 37374_webfonts-10

Теперь, когда оба начертания шрифта '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`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

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

id: 37374_webfonts-11

У нас определены два начертания для шрифта '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)

id: 37374_webfonts-12

Помимо жирности, `@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

id: 37374_webfonts-13

В правиле `@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("формат")`. Убедитесь, что обе функции присутствуют и правильно записаны.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

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

id: 37374_webfonts-14

Подключите жирное начертание шрифта 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;`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку
Предыдущая темаСледующая тема
НайтиКурс.Ру