Оптимизация объявлений шрифтов: импорт нескольких весов шрифта с помощью одного запроса @font-face

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

Задача: импорт нескольких весов шрифта

Рассмотрим сценарий, в котором шрифт Klavika доступен в различных вариантах. вес и размеры:

Klavika-Bold-Italic.otf
Klavika-Bold.otf
Klavika-Light-Italic.otf
Klavika-Light.otf
Klavika-Medium-Italic.otf
Klavika-Medium.otf
Klavika-Regular-Italic.otf
Klavika-Regular.otf

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

Решение: использование расширенного синтаксиса @font-face

К счастью, @font-face предлагает расширенный синтаксис синтаксис, который позволяет назначать разные значения толщины и стиля одному семейству шрифтов:

@font-face {
  font-family: 'Klavika';
  src: url(../fonts/Klavika-Regular.otf), weight: normal;
  src: url(../fonts/Klavika-Bold.otf), weight: bold;
}

В этом примере:

• font-family: 'Klavika' определяет имя семейства шрифтов.
• src: url(..), за которым следует соответствующий вес, указывает исходные файлы для обычного и полужирного вариантов.

Преимущества объединенных запросов шрифтов

Консолидация запросов шрифтов дает несколько преимуществ:

• Уменьшение дублирования кода: Позволяет избежать повторных запросов @font-face для каждого варианта веса.
• Улучшение читабельности: Сохраняет CSS-код организованным и кратким .
• Упрощенное обслуживание: Изменения толщины шрифта можно внести в одном месте.

Дополнительные ресурсы

Полный обзор этой функции и ее стандартного использования см. в следующей статье: [Расширенный синтаксис @font-face](https://developer.mozilla.org/en-US/docs/Web/CSS/@font -face.

Пример пера

Смотрите живую демонстрацию этой техники в следующем примере пера: [Несколько весов шрифта с одним запросом @font-face]( https://codepen.io/anon/pen/abvaqP).