Дескриптор CSS-правила `src`

src — это дескриптор CSS для правила @font-face, который указывает ресурс, содержащий данные шрифта. Он необходим для корректной работы правила @font-face.

Синтаксис

/* <url> values */
src: url("https://example.com/path/to/font.woff"); /* Absolute URL */
src: url("path/to/font.woff"); /* Relative URL */
src: url("path/to/svgFont.svg#example"); /* Fragment identifying font */

/* <font-face-name> values */
src: local(font); /* Unquoted name */
src: local(some font); /* Name containing space */
src: local("font"); /* Quoted name */
src: local("some font"); /* Quoted name containing a space */

/* <tech(<font-tech>)> values */
src: url("path/to/fontCOLRv1.otf") tech(color-COLRv1);
src: url("path/to/fontCOLR-svg.otf") tech(color-SVG);

/* <format(<font-format>)> values */
src: url("path/to/font.woff") format("woff");
src: url("path/to/font.woff2") format("woff2");

/* Multiple resources */
src:
  url("path/to/font.woff") format("woff"),
  url("path/to/font.woff2") format("woff2");

/* Multiple resources with font format and technologies */
src:
  url("trickster-COLRv1.woff2") format("woff2") tech(color-COLRv1),
  url("trickster-outline.woff2") format("woff2");

Значения

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.

Формальное определение

Формальный синтаксис

<font-src>

Примеры

Указание ресурсов шрифтов с помощью url() и local()

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

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

/* 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.woff2") format("woff2"),
    url("GillSansBold.svg#MyFontBold"); /* Referencing an SVG font fragment by id */
  font-weight: bold;
}

/* Using the regular font face */
p {
  font-family: "MainText", sans-serif;
}

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

Указание ресурсов шрифтов с помощью значений tech() и format()

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

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

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

Указание резервных вариантов для старых браузеров

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

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

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

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

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

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

Проверка поддержки шрифта пользовательским агентом

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

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

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

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

Совместимость с браузерами

См. также

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