ШрифтFace

Интерфейс FontFace API загрузки шрифтов CSS представляет собой один пригодный для использования шрифт.

Этот интерфейс определяет источник шрифта, либо URL внешнего ресурса, либо буфер, и свойства шрифта, такие как style, weight, и так далее. Для источников шрифтов по URL он позволяет авторам запускать событие при загрузке удалённого шрифта и отслеживать состояние загрузки.

FontFace()

Создаёт и возвращает новый объект FontFace, созданный из внешнего ресурса, описанного URL, или из ArrayBuffer.

FontFace.ascentOverride

Строка, которая получает или задаёт метрику восхождения шрифта. Она эквивалентна описателю ascent-override.

FontFace.descentOverride

Строка, которая получает или задаёт метрику нисхождения шрифта. Она эквивалентна описателю descent-override.

FontFace.display

Строка, которая определяет отображение шрифта на основе того, загружен ли он и готов к использованию.

FontFace.family

Строка, которая получает или задаёт название шрифта. Она эквивалентна описателю font-family.

FontFace.featureSettings

Строка, которая получает или задаёт редко используемые характеристики шрифта, которые недоступны из свойств варианта шрифта. Она эквивалентна свойству CSS font-feature-settings.

FontFace.lineGapOverride

Строка, которая получает или задаёт метрику межстрочного интервала шрифта. Она эквивалентна описателю line-gap-override.

FontFace.loaded Только для чтения

Возвращает Promise, который разрешается объектом FontFace, когда шрифт, указанный в конструкторе объекта, завершает загрузку, или отклоняется с SyntaxError DOMException.

FontFace.status Только для чтения

Возвращает перечисление, указывающее состояние шрифта, одно из "unloaded", "loading", "loaded", или "error".

FontFace.stretch

Строка, которая получает или задаёт, как шрифт растягивается. Она эквивалентна описателю font-stretch.

FontFace.style

Строка, которая получает или задаёт стиль шрифта. Она эквивалентна описателю font-style.

FontFace.unicodeRange

Строка, которая получает или задаёт диапазон кодов Юникода, охватывающий шрифт. Она эквивалентна описателю unicode-range.

FontFace.variant Нестандартный

Строка, которая получает или задаёт вариант шрифта.

FontFace.variationSettings Экспериментальный

Строка, которая получает или задаёт настройки вариаций шрифта. Она эквивалентна описателю font-variation-settings.

FontFace.weight

Строка, содержащая вес шрифта. Она эквивалентна описателю font-weight.

FontFace.load()

Загружает шрифт на основе требований, переданных в конструктор объекта, включая местоположение или буфер источника, и возвращает Promise, который разрешается текущим объектом FontFace.

Код ниже определяет шрифт с данными по URL "my-font.woff" с несколькими описателями шрифтов. Для демонстрации работы, мы затем определяем описатель stretch с помощью свойства.

//Define a FontFace
const font = new FontFace("my-font", "url(my-font.woff)", {
  style: "italic",
  weight: "400",
});

font.stretch = "condensed";

Далее мы загружаем шрифт с помощью FontFace.load() и используем возвращаемое обещание для отслеживания завершения или сообщения об ошибке.

//Load the font
font.load().then(
  () => {
    // Resolved - add font to document.fonts
  },
  (err) => {
    console.error(err);
  },
);

Для фактического использования шрифта нам необходимо добавить его в FontFaceSet. Это можно сделать до или после загрузки шрифта.

Дополнительные примеры см. в API загрузки шрифтов CSS > Примеры.

• @font-face