src

url()

Указывает на внешнюю ссылку, состоящую из <url>, за которой следуют необязательные подсказки с использованием компонентов format() и tech(), которые определяют формат и технологию шрифта ресурса, на который указывает URL. Компоненты format() и tech() представляют собой список строк известных форматов шрифтов и технологий, разделённых запятыми. Если пользовательский агент не поддерживает технологию или формат шрифта, он пропускает загрузку ресурса шрифта. Если подсказки формата или технологии не указаны, ресурс шрифта всегда загружается.

format()

Необязательное объявление, которое следует за значением url() и предоставляет пользователю подсказку относительно формата шрифта. Если значение не поддерживается или некорректно, браузер может не загрузить ресурс, потенциально экономя пропускную способность. Если значение опущено, браузер загрузит ресурс, а затем определит формат. Если для обеспечения обратной совместимости используется источник шрифта, который не входит в список определённых ключевых слов, заключите строку формата в кавычки. Возможные значения описаны в разделе Форматы шрифтов ниже.

tech()

Необязательное объявление, которое следует за значением url() и предоставляет пользователю подсказку относительно технологии шрифта. Значение для tech() может быть одним из ключевых слов, описанных в разделе Технологии шрифтов.

local(<font-face-name>)

Указывает имя шрифта, если шрифт доступен на устройстве пользователя. Заключение имени шрифта в кавычки является необязательным.

Примечание: Для шрифтов OpenType и TrueType <font-face-name> используется для сопоставления имени PostScript или полного имени шрифта в таблице имен локально доступных шрифтов. Тип используемого имени зависит от платформы и шрифта, поэтому для обеспечения правильного сопоставления на разных платформах необходимо включить оба этих имени. Подстановки платформы для данного имени шрифта не должны использоваться.

Примечание: Локально доступные шрифты могут быть предварительно установлены на устройстве пользователя или установлены пользователем.

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

Чтобы предотвратить это, пользовательские агенты могут игнорировать пользовательские шрифты при использовании local().

<font-face-name>

Указывает полное имя или имя PostScript шрифта, установленного локально, с использованием значения компонента local(), которое однозначно идентифицирует один шрифт среди семейства шрифтов. Имя можно необязательно заключить в кавычки. Имя шрифта не чувствительно к регистру.

Значение этого описания представляет собой упорядоченный список внешних ссылок или локально установленных имён шрифтов, разделённых запятыми, где каждый ресурс указан с помощью url() или local(). При необходимости шрифта пользовательский агент перебирает указанный набор ссылок, используя первую из них, которую он может успешно активировать. Шрифты с неверными данными или локальные шрифты, которых не удаётся найти, игнорируются, и пользовательский агент загружает следующий шрифт в списке.

Если задано несколько описаний src , применяется только последнее объявленное правило, которое может загрузить ресурс. Если последнее описание src может загрузить ресурс и не содержит локального шрифта local() , браузер может загрузить внешние файлы шрифта и проигнорировать локальную версию, даже если она доступна на устройстве.

Как и другие URL-адреса в CSS, URL-адрес может быть относительным, в этом случае он разрешается относительно расположения таблицы стилей, содержащей правило @font-face. В случае шрифтов SVG URL-адрес указывает на элемент в документе, содержащем определения шрифтов SVG. Если ссылка на элемент опущена, подразумевается ссылка на первый определённый шрифт. Аналогично, форматы контейнеров шрифтов, которые могут содержать более одного шрифта, загружают только один из шрифтов для данного правила @font-face. Идентификаторы фрагментов используются для указания загружаемого шрифта. Если формат контейнера не имеет определённой схемы идентификаторов фрагментов, используется схема индексации с началом от 1 (например, "font-collection#1" для первого шрифта, "font-collection#2" для второго шрифта и т.д.).

Если файл шрифта является контейнером для нескольких шрифтов, для указания подшрифта, который следует использовать, включается идентификатор фрагмента, как показано ниже:

/* WhichFont is the PostScript name of a font in the font file */
src: url(collection.otc#WhichFont);
/* WhichFont is the element id of a font in the SVG Font file */
src: url(fonts.svg#WhichFont);

В следующей таблице показаны допустимые ключевые слова шрифтов и соответствующие им форматы шрифтов. Чтобы проверить, поддерживает ли браузер формат шрифта в CSS, используйте правило @supports.

Старые ненормализованные значения format() имеют следующий эквивалентный синтаксис; они представлены в виде строки, заключённой в кавычки, для обеспечения обратной совместимости:

В следующей таблице показаны допустимые значения описателя tech() и соответствующие технологии шрифтов. Чтобы проверить, поддерживает ли браузер технологию шрифта в CSS, используйте правило @supports.

<url> [ format( <font-format> ) ]? [ tech( <font-tech># ) ]?  |
local( <family-name> )

<font-format> = [ <string> | collection | embedded-opentype | opentype | svg | truetype | woff | woff2 ]

<font-tech> = [ <font-features-tech> | <color-font-tech> | variations | palettes | incremental-patch | incremental-range | incremental-auto ]

<font-features-tech> = [ features-opentype | features-aat | features-graphite ]

<color-font-tech> = [ color-COLRv0 | color-COLRv1 | color-SVG | color-sbix | color-CBDT ]

В примере ниже показано, как определить два шрифта с одинаковым семейством шрифтов. Семейство шрифтов font-family называется MainText. Первый шрифт имеет обычный шрифт, а второй — жирный вариант того же семейства шрифтов.

/* Defining a regular font face */
@font-face {
  font-family: MainText;
  src:
    local(Futura-Medium),
    url("FuturaMedium.woff") format("woff"),
    url("FuturaMedium.otf") format("opentype");
}

/* Defining a different bold font face for the same family */
@font-face {
  font-family: MainText;
  src:
    local(Gill Sans Bold) /* full font name */,
    local(GillSans-Bold) /* postscript name */,
    url("GillSansBold.woff") format("woff"),
    url("GillSansBold.otf") format("opentype"),
    url("GillSansBold.svg#MyFontBold"); /* Referencing an SVG font fragment by id */
  font-weight: bold;
}

/* Using the regular font face */
p {
  font-family: MainText;
}

/* Font-family is inherited, but bold fonts are used */
p.bold {
  font-weight: bold;
}

В следующем примере показано, как использовать значения tech() и format() для указания ресурсов шрифтов. Шрифт, использующий технологию color-colrv1 и формат opentype, задается с помощью значений tech() и format(). Цветовой шрифт будет активирован, если пользовательский агент его поддерживает, а opentype без цвета будет указан как резервный вариант.

@font-face {
  font-family: "Trickster";
  src:
    url("trickster-COLRv1.otf") format(opentype) tech(color-COLRv1),
    url("trickster-outline.otf") format(opentype);
}

/* Using the font face */
p {
  font-family: "Trickster";
}

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

Обычно это означает, что локальные файлы должны идти перед удаленными, а ресурсы с ограничениями format() или tech() — перед ресурсами без них (иначе менее ограниченная версия всегда будет выбрана). Например:

@font-face {
  font-family: "MgOpenModernaBold";
  src:
    url("MgOpenModernaBoldIncr.otf") format("opentype") tech(incremental),
    url("MgOpenModernaBold.otf") format(opentype);
}

Браузер, не поддерживающий tech() выше, должен пропустить первый элемент и попытаться загрузить второй ресурс.

Некоторые браузеры пока не игнорируют недействительные элементы, а вместо этого отклоняют весь описатель src при наличии любого недействительного значения. При работе с такими браузерами вы можете указать несколько описателей src как резервные. Обратите внимание, что несколько описателей src обрабатываются в обратном порядке, поэтому в конце остается наш обычный описатель со всеми элементами.

@font-face {
  font-family: "MgOpenModernaBold";
  src: url("MgOpenModernaBold.otf") format(opentype);
  src: url("MgOpenModernaBoldIncr.otf") format("opentype") tech(incremental);
  src:
    url("MgOpenModernaBoldIncr.otf") format("opentype") tech(incremental),
    url("MgOpenModernaBold.otf") format(opentype);
}

В следующем примере показано, как проверить поддержку технологии шрифта пользовательским агентом с помощью правила @supports. Блок CSS внутри @supports будет применен, если пользовательский агент поддерживает технологию color-COLRv1.

@supports font-tech(color-COLRv1) {
  @font-face {
    font-family: "Trickster";
    src: url("trickster-COLRv1.otf") format(opentype) tech(color-COLRv1);
  }

  .colored_text {
    font-family: "Trickster";
  }
}

• @font-face
• @supports
• font-display
• font-family
• font-stretch
• font-style
• font-weight
• font-feature-settings
• font-variation-settings
• unicode-range