@font-face

Базовая линия Широко доступна

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и версиях браузеров. Она доступна в браузерах с сентября 2016 года.

@font-face CSS правило задаёт пользовательский шрифт для отображения текста; шрифт может быть загружен с удалённого сервера или установлен локально на компьютере пользователя.

Синтаксис

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

Описание

ascent-override: Определяет метрику восхождения для шрифта.
descent-override: Определяет метрику спуска для шрифта.
font-display: Определяет, как будет отображаться шрифт в зависимости от того, загружен ли он и готов к использованию.
font-family: Задаёт имя, которое будет использоваться как значение шрифта для свойств шрифта.
font-stretch: Значение font-stretch. Принимает два значения для указания диапазона, поддерживаемого шрифтом, например font-stretch: 50% 200%;
font-style: Значение font-style. Принимает два значения для указания диапазона, поддерживаемого шрифтом, например font-style: oblique 20deg 50deg;
font-weight: Значение font-weight. Принимает два значения для указания диапазона, поддерживаемого шрифтом, например font-weight: 100 400;

Примечание: Описание font-variant было удалено из спецификации в 2018 году. Значение font-variant поддерживается, но эквивалента описания нет.
font-feature-settings: Позволяет контролировать расширенные типографические функции в шрифтах OpenType.
font-variation-settings: Позволяет осуществлять низкоуровневый контроль над вариациями шрифтов OpenType или TrueType, указав четырёхбуквенные имена осей функций для изменения, вместе с их значениями.
line-gap-override: Определяет метрику межстрочного интервала для шрифта.
size-adjust: Определяет множитель для контуров глифов и метрик, связанных с этим шрифтом. Это облегчает согласование дизайна различных шрифтов при рендеринге при одинаковом размере шрифта.
src: Указывает ссылки на ресурсы шрифтов, включая подсказки о формате и технологии шрифта. Это необходимо для валидности правила @font-face.
unicode-range: Диапазон точек кода Юникода, используемых из шрифта.

Описание

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

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

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

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

Примечание: Стратегии кеширования при загрузке шрифтов в старых браузерах описаны на странице src.

Правило @font-face может использоваться не только на верхнем уровне CSS, но и внутри любого условного правила CSS.

Типы MIME шрифтов

Формат	Тип MIME
TrueType	`font/ttf`
OpenType	`font/otf`
Формат веб-шрифтов	`font/woff`
Формат веб-шрифтов 2	`font/woff2`

Примечания

Веб-шрифты подчиняются тому же ограничению домена (файлы шрифтов должны находиться на том же домене, что и страница, использующая их), если не используются управляющие механизмы доступа HTTP, чтобы ослабить это ограничение.

@font-face не может быть объявлено внутри селектора CSS. Например, следующее не будет работать:

.className {
  @font-face {
    font-family: "MyHelvetica";
    src: local("Helvetica Neue Bold"), local("HelveticaNeue-Bold"),
      url("MgOpenModernaBold.ttf");
    font-weight: bold;
  }
}

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

@font-face = 
  @font-face { <declaration-list> }

Примеры

Указание загружаемого шрифта

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

<body>
  This is Bitstream Vera Serif Bold.
</body>

@font-face {
  font-family: "Bitstream Vera Serif Bold";
  src: url("https://mdn.github.io/shared-assets/fonts/VeraSeBd.ttf");
}

body {
  font-family: "Bitstream Vera Serif Bold", serif;
}

Указание альтернатив локального шрифта

В этом примере используется локальная копия шрифта «Helvetica Neue Bold» пользователя; если у пользователя этого шрифта нет (проверяются полное имя шрифта и имя PostScript), то вместо него используется загружаемый шрифт под названием «MgOpenModernaBold.ttf»:

@font-face {
  font-family: "MyHelvetica";
  src: local("Helvetica Neue Bold"), local("HelveticaNeue-Bold"),
    url("MgOpenModernaBold.ttf");
  font-weight: bold;
}

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

Спецификация
CSS Fonts Module Level 4 # font-face-rule

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

	Рабочие столы					Мобильные телефоны
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari на IOS	Samsung Internet	WebView Android

END_OF_DOCUMENT_MARKER

`OpenType_CBDT_CBLC`	66	79	Нет	53	Нет	66	Нет	47	Нет	9.0	66
`OpenType_COLRv0`	53	79	31	40	11.1	53	31	41	11.3	6.0	53
`OpenType_COLRv1`	98	98	107	84	Нет	98	107	68	Нет	18.0	98
`OpenType_SBIX`	66	79	Нет	53	9.1	66	Нет	47	9.3	9.0	66
`OpenType_SVG`	Нет	Нет	31	Нет	12.1	Нет	31	Нет	12.2	Нет	Нет
`SVG_fonts`	1–38	Нет	Нет	15–25	3.1	18–38	Нет	14–25	3	1.0–3.0	≤37–38
`WOFF`	6	12	3.5	11.1	5.1	18	4	11.1	5	1.0	4.4
`WOFF_2`	36	14	39	23	10 Поддерживается только на macOS 10.12 (Sierra) и более поздних версиях.	36	39	24	10	3.0	37
`@font-face`	1	12	3.5	10	3.1	18	4	10.1	2	1.0	≤37
`ascent-override`	87	87	89	73	Нет	87	89	62	Нет	14.0	87
`descent-override`	87	87	89	73	Нет	87	89	62	Нет	14.0	87
`font-display`	60	79	58	47	11.1	60	58	44	11.3	11.0	60
`font-family`	4	12	3.5	10	3.1	18	4	10.1	2	1.0	2.2
`font-feature-settings`	Нет	Нет	34 В ISO/IEC CD 14496-22 3rd edition предлагается использовать функцию `ssty` для предоставления вариантов глифов, более подходящих для использования в сценариях (например, штрихи, используемые в качестве верхних индексов). Начиная с Firefox 29, это делается автоматически механизмом рендеринга MathML. В ISO/IEC CD 14496-22 3rd edition также предлагается применять функцию `dtls` к буквам при размещении математических акцентов, чтобы получить формы без точек (например, i, j без точки со шляпкой). Начиная с Firefox 35, это делается автоматически механизмом рендеринга MathML. Вы можете переопределить значения по умолчанию, определяемые механизмом рендеринга MathML, с помощью CSS. 15 С Firefox 4 по Firefox 14 (включительно) Firefox поддерживал более старый, немного отличающийся синтаксис. См. Поддержка функции OpenType Font Feature в Firefox 4.	Нет	10	Нет	34 В ISO/IEC CD 14496-22 3rd edition предлагается использовать функцию `ssty` для предоставления вариантов глифов, более подходящих для использования в сценариях (например, штрихи, используемые в качестве верхних индексов). Начиная с Firefox 29, это делается автоматически механизмом рендеринга MathML. В ISO/IEC CD 14496-22 3rd edition также предлагается применять функцию `dtls` к буквам при размещении математических акцентов, чтобы получить формы без точек (например, i, j без точки со шляпкой). Начиная с Firefox 35, это делается автоматически механизмом рендеринга MathML. Вы можете переопределить значения по умолчанию, определяемые механизмом рендеринга MathML, с помощью CSS. 15 С Firefox 4 по Firefox 14 (включительно) Firefox поддерживал более старый, немного отличающийся синтаксис. См. Поддержка функции OpenType Font Feature в Firefox 4.	Нет	10	Нет	Нет
`font-stretch`	62	17	62	49	10.1	62	62	41	10.3	6.0	62
`font-style`	4	12	3.5	10	3.1	18	4	10.1	2	1.0	≤37
`font-variant`	4	12	3.5	10	3.1	18	4	10.1	2	1.0	≤37
`font-variation-settings`	Нет	Нет	62	Нет	Нет	Нет	62	Нет	Нет	Нет	Нет
`font-weight`	4	12	3.5	10	3.1	18	4	10.1	2	1.0	≤37
`line-gap-override`	87	87	89	73	Нет	87	89	62	Нет	14.0	87
`size-adjust`	92	92	92	78	17	92	92	Нет	17	16.0	92

`src`	4	12	3.5	10	3.1	18	4	10.1	2	1.0	2.2
`unicode-range`	1	12	36	15	3.1	18	36	14	3	1.0	≤37

См. также

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face