FontFace

Вы читаете английскую версию этой статьи, так как пока нет перевода на данный язык. Помогите нам перевести эту статью!

Это экспериментальная технология
Так как спецификация этой технологии ещё не стабилизировалась, смотрите таблицу совместимости по поводу использования в различных браузерах. Также заметьте, что синтаксис и поведение экспериментальной технологии может измениться в будущих версиях браузеров, вслед за изменениями спецификации.

Интерфейс FontFace представляет единый используемый шрифт. Он позволяет контролировать источник шрифта, являющийся URL-адресом внешнего ресурса или буфера; а также контролировать момент загрузки шрифта и его текущее состояние.

Конструктор

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

Свойства

Этот интерфейс не наследует свойства.

FontFace.display
CSSOMString определяет способ отображения шрифта, основываясь на информации о статусе его загрузки и готовности к использованию.
FontFace.family
CSSOMString получает или устанавливает семейство шрифта. Эквивалентен дескриптору font-family.
FontFace.featureSettings
CSSOMString получает или устанавливает редко используемые возможности шрифта. Эквивалентен дескриптору font-feature-settings.
FontFace.loaded Только для чтения
Возвращает Promise, которое выполняется для текущего объекта  FontFace, когда специфичный шрифт, указанный в конструкторе объекта, завершает загрузку, либо отклоняется с помощью SyntaxError.
FontFace.status Только для чтения
Возвращает перечисляемое значение, указывающее на состояние шрифта : "unloaded", "loading", "loaded", или "error".
FontFace.stretch
CSSOMString получает или устанавливает свойство растягивания шрифта. Эквивалентен дескриптору font-stretch.
FontFace.style
CSSOMString получает или устанавливает стиль шрифта. Эквивалентен дескриптору font-style.
FontFace.unicodeRange
CSSOMString получает или устанавливает диапазон точек кодирования Юникод, охватывающих шрифт. Эквивалентен дескриптору unicode-range.
FontFace.variant
CSSOMString получает или устанавливает вариант шрифта. Эквивалентен дескриптору font-variant.
FontFace.weight
CSSOMString содежит толщину шрифта. Эквивалентен дескриптору font-weight.

Методы

Этот интерфейс не наследует методы.

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

Спецификации

Спецификация Статус оммнтари
CSS Font Loading Module Level 3
Определение 'FontFaceSet' в этой спецификации.		 Рабочий черновик Первое определение

Поддержка браузерами

Update compatibility data on GitHub
КомпьютерыМобильные
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidFirefox для AndroidOpera для AndroidSafari on iOSSamsung Internet
FontFaceChrome Полная поддержка 35Edge ? Firefox Полная поддержка 41IE ? Opera Полная поддержка 22Safari Полная поддержка 10WebView Android Полная поддержка 37Chrome Android Полная поддержка 35Firefox Android Полная поддержка 41Opera Android Полная поддержка 22Safari iOS Полная поддержка 10Samsung Internet Android ?
FontFace() constructorChrome Полная поддержка 35Edge ? Firefox Полная поддержка 41IE ? Opera Полная поддержка 22Safari Полная поддержка 10WebView Android Полная поддержка 37Chrome Android Полная поддержка 35Firefox Android Полная поддержка 41Opera Android Полная поддержка 22Safari iOS Полная поддержка 10Samsung Internet Android ?
display
Экспериментальная
Chrome Полная поддержка 60Edge ? Firefox Полная поддержка 58IE ? Opera Полная поддержка 47Safari Полная поддержка 11WebView Android Полная поддержка 60Chrome Android Полная поддержка 60Firefox Android Нет поддержки НетOpera Android Полная поддержка 44Safari iOS Нет поддержки НетSamsung Internet Android ?
family
Экспериментальная
Chrome Полная поддержка 35Edge ? Firefox Полная поддержка ДаIE ? Opera Полная поддержка ДаSafari Полная поддержка 10WebView Android Полная поддержка 37Chrome Android Полная поддержка 35Firefox Android Полная поддержка ДаOpera Android Полная поддержка ДаSafari iOS Полная поддержка ДаSamsung Internet Android ?
featureSettings
Экспериментальная
Chrome Полная поддержка 35Edge ? Firefox Полная поддержка ДаIE ? Opera Полная поддержка ДаSafari Полная поддержка 10WebView Android Полная поддержка 37Chrome Android Полная поддержка 35Firefox Android Полная поддержка ДаOpera Android Полная поддержка ДаSafari iOS Полная поддержка ДаSamsung Internet Android ?
load
Экспериментальная
Chrome Полная поддержка 45
Полная поддержка 45
Нет поддержки 35 — 45
Замечания
Замечания Before Chrome 45, the returned promise resolved with void instead of a FontFace object as required by the specification.
Edge ? Firefox Полная поддержка ДаIE ? Opera Полная поддержка ДаSafari Полная поддержка 10WebView Android Полная поддержка 45
Полная поддержка 45
Нет поддержки 37 — 45
Замечания
Замечания Before WebView 45, the returned promise resolved with void instead of a FontFace object as required by the specification.
Chrome Android Полная поддержка 45
Полная поддержка 45
Нет поддержки 35 — 45
Замечания
Замечания Before Chrome 45, the returned promise resolved with void instead of a FontFace object as required by the specification.
Firefox Android Полная поддержка ДаOpera Android Полная поддержка ДаSafari iOS Полная поддержка ДаSamsung Internet Android ?
loaded
Экспериментальная
Chrome Полная поддержка 45
Полная поддержка 45
Нет поддержки 35 — 45
Замечания
Замечания Before Chrome 45, the returned promise resolved with void instead of a FontFace object as required by the specification.
Edge ? Firefox Полная поддержка ДаIE ? Opera Полная поддержка ДаSafari Полная поддержка 10WebView Android Полная поддержка 45
Полная поддержка 45
Нет поддержки 37 — 45
Замечания
Замечания Before WebView 45, the returned promise resolved with void instead of a FontFace object as required by the specification.
Chrome Android Полная поддержка 45
Полная поддержка 45
Нет поддержки 35 — 45
Замечания
Замечания Before Chrome 45, the returned promise resolved with void instead of a FontFace object as required by the specification.
Firefox Android Полная поддержка ДаOpera Android Полная поддержка ДаSafari iOS Полная поддержка ДаSamsung Internet Android ?
status
Экспериментальная
Chrome Полная поддержка 35Edge ? Firefox Полная поддержка ДаIE ? Opera Полная поддержка ДаSafari Полная поддержка 10WebView Android Полная поддержка 37Chrome Android Полная поддержка 35Firefox Android Полная поддержка ДаOpera Android Полная поддержка ДаSafari iOS Полная поддержка ДаSamsung Internet Android ?
stretch
Экспериментальная
Chrome Полная поддержка 35Edge ? Firefox Полная поддержка ДаIE ? Opera Полная поддержка ДаSafari Полная поддержка 10WebView Android Полная поддержка 37Chrome Android Полная поддержка 35Firefox Android Полная поддержка ДаOpera Android Полная поддержка ДаSafari iOS Полная поддержка ДаSamsung Internet Android ?
style
Экспериментальная
Chrome Полная поддержка 35Edge ? Firefox Полная поддержка ДаIE ? Opera Полная поддержка ДаSafari Полная поддержка 10WebView Android Полная поддержка 37Chrome Android Полная поддержка 35Firefox Android Полная поддержка ДаOpera Android Полная поддержка ДаSafari iOS Полная поддержка ДаSamsung Internet Android ?
unicodeRange
Экспериментальная
Chrome Полная поддержка 35Edge ? Firefox Полная поддержка ДаIE ? Opera Полная поддержка ДаSafari Полная поддержка 10WebView Android Полная поддержка 37Chrome Android Полная поддержка 35Firefox Android Полная поддержка ДаOpera Android Полная поддержка ДаSafari iOS Полная поддержка ДаSamsung Internet Android ?
variant
Экспериментальная
Chrome Полная поддержка 35Edge ? Firefox Полная поддержка ДаIE ? Opera Полная поддержка ДаSafari Полная поддержка 10WebView Android Полная поддержка 37Chrome Android Полная поддержка 35Firefox Android Полная поддержка ДаOpera Android Полная поддержка ДаSafari iOS Полная поддержка ДаSamsung Internet Android ?
weight
Экспериментальная
Chrome Полная поддержка 35Edge ? Firefox Полная поддержка ДаIE ? Opera Полная поддержка ДаSafari Полная поддержка 10WebView Android Полная поддержка 37Chrome Android Полная поддержка 35Firefox Android Полная поддержка ДаOpera Android Полная поддержка ДаSafari iOS Полная поддержка ДаSamsung Internet Android ?
Available in workersChrome Полная поддержка 69Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android Полная поддержка 69Chrome Android Полная поддержка 69Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?

Легенда

Полная поддержка  
Полная поддержка
Нет поддержки  
Нет поддержки
Совместимость неизвестна  
Совместимость неизвестна
Экспериментальная. Ожидаемое поведение может измениться в будущем.
Экспериментальная. Ожидаемое поведение может измениться в будущем.
Смотрите замечания реализации.
Смотрите замечания реализации.
Связанные темы