Перевод не завершен. Пожалуйста, помогите перевести эту статью с английского.

@font-face CSS @-правило позволяет указать шрифты для отображения текста на веб-страницах, которые могут быть загружены либо с удаленного сервера, либо с компьютера пользователя. Если в правиле была объявлена функция local(), с названием шрифта, то будет производиться поиск на компьютере пользователя, и в случае обнаружения будет использован этот шрифт. Иначе будет скачан и использован шрифт, указанный в функции url().
 
@font-face позволяет разрабатывать контент не ограничиваясь набором "безопасных" шрифтов (шрифтов, которые настолько распространены, что считаются доступными по умолчанию). Возможность определить локально установленный шрифт позволяет более гибко настраивать шрифты не полагаясь на соединение с интернетом. 
 
Распространенным случаем является одновременное использование url() и local(), чтобы использовать локальный шрифт, если он доступен, или иначе скачать копию шрифта.
 
Это правило может использоваться не только на верхнем уровне CSS, но и внутри любого  @-правила.
@font-face {
 font-family: "Open Sans";
 src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"),
        url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
}

Синтаксис

Descriptors

font-display
Определяет как отображается шрифт, основываясь на том, был ли он загружен и готов ли к использованию.
font-family
Указывает имя шрифта, которое будет использоваться для задания свойств шрифта.
font-stretch
Значение font-stretch.
font-style
Значение font-style.
font-weight
Значение font-weight.
font-variant
Значение font-variant.
font-feature-settings
Позволяет контролировать другие расширенные особенности OpenType-шрифтов.
font-variation-settings
Позволяет осуществлять низкоуровневый контроль над вариациями OpenType и TrueType шрифтов, указывая четырёхбуквенные названия осей для изменения вместе с их значениями.
src
Задает ресурс, содержащий данные шрифта. Это может быть URL-адрес расположения удаленного файла шрифта или имя шрифта на компьютере пользователя.

Чтобы дать браузеру возможность выбрать наиболее подходящий формат шрифта, его можно указать при объявлении внутри функции format():

 
src: url(ideal-sans-serif.woff) format("woff"),
     url(basic-sans-serif.ttf) format("opentype");

Список доступных форматов: "woff""woff2""truetype""opentype""embedded-opentype", и "svg".

unicode-range
Диапазон Unicode кодов, который будет использоваться в шрифте.

Formal syntax

@font-face {
  [ font-family: <family-name>; ] ||
  [ src: <src>; ] ||
  [ unicode-range: <unicode-range>; ] ||
  [ font-variant: <font-variant>; ] ||
  [ font-feature-settings: <font-feature-settings>; ] ||
  [ font-variation-settings: <font-variation-settings>; ] ||
  [ font-stretch: <font-stretch>; ] ||
  [ font-weight: <font-weight>; ] ||
  [ font-style: <font-style>; ]
}

где
<family-name> = <string> | <custom-ident>+

Примеры

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

Смотреть живой пример

<html>
<head>
  <title>Web Font Sample</title>
  <style type="text/css" media="screen, print">
    @font-face {
      font-family: "Bitstream Vera Serif Bold";
      src: url("https://mdn.mozillademos.org/files/2468/VeraSeBd.ttf");
    }
    
    body { font-family: "Bitstream Vera Serif Bold", serif }
  </style>
</head>
<body>
  This is Bitstream Vera Serif Bold.
</body>
</html>

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

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

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

Формат MIME-тип
TrueType font/ttf
OpenType font/otf
Web Open File Format font/woff
Web Open File Format 2 font/woff2

Заметки

  • Веб шрифты попадают под правило ограничения домена (файлы шрифтов должны находиться на том же самом домене, что и использующая их страница), если это ограничение не снимается с помощью CORS.
  • @font-face не может быть объявлен внутри CSS-селектора. Следующий пример не будет работать:
    .className { 
      @font-face { 
        font-family: MyHelvetica; 
        src: local("Helvetica Neue Bold"), local("HelveticaNeue-Bold"),
            url(MgOpenModernaBold.ttf);
        font-weight: bold; 
      } 
    }

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

Спецификация Статус Комментарии
WOFF File Format 2.0
Определение 'WOFF2 font format' в этой спецификации.
Рекомендация Спецификация нового формата шрифта с новым алгоритмом сжатия
WOFF File Format 1.0
Определение 'WOFF font format' в этой спецификации.
Рекомендация Спецификация формата шрифта
CSS Fonts Module Level 3
Определение '@font-face' в этой спецификации.
Кандидат в рекомендации Первоначальное определение

Browser compatibility

Update compatibility data on GitHub
КомпьютерыМобильные
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidEdge MobileFirefox для AndroidOpera для AndroidSafari on iOSSamsung Internet
Базовая поддержкаChrome Полная поддержка 4Edge Полная поддержка 12Firefox Полная поддержка 3.5IE Полная поддержка 4Opera Полная поддержка 10Safari Полная поддержка 3.1WebView Android Полная поддержка ДаChrome Android Полная поддержка ДаEdge Mobile Полная поддержка 12Firefox Android Полная поддержка 4Opera Android Полная поддержка 10Safari iOS Полная поддержка ДаSamsung Internet Android Полная поддержка Да
WOFFChrome Полная поддержка 6Edge Полная поддержка ДаFirefox Полная поддержка 3.5IE Полная поддержка 9Opera Полная поддержка 11.1Safari Полная поддержка 5.1WebView Android Полная поддержка 4.4Chrome Android Полная поддержка ДаEdge Mobile Полная поддержка ДаFirefox Android Полная поддержка 4Opera Android Полная поддержка 11Safari iOS Полная поддержка 5Samsung Internet Android Полная поддержка Да
WOFF 2Chrome Полная поддержка 36Edge Полная поддержка 14Firefox Полная поддержка 39
Полная поддержка 39
Полная поддержка 35
Отключено
Отключено From version 35: this feature is behind the gfx.downloadable_fonts.woff2.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Нет поддержки НетOpera Полная поддержка 23Safari Полная поддержка 10
Замечания
Полная поддержка 10
Замечания
Замечания Supported only on macOS 10.12 (Sierra) and later.
WebView Android Полная поддержка 37Chrome Android Полная поддержка 36Edge Mobile Полная поддержка 14Firefox Android Полная поддержка 39
Полная поддержка 39
Полная поддержка 35
Отключено
Отключено From version 35: this feature is behind the gfx.downloadable_fonts.woff2.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Полная поддержка 23Safari iOS Полная поддержка 10Samsung Internet Android Полная поддержка 3.0
SVG fonts
УстаревшаяНестандартная
Chrome Нет поддержки НетEdge Нет поддержки НетFirefox Нет поддержки НетIE Нет поддержки НетOpera Нет поддержки НетSafari Полная поддержка ДаWebView Android Нет поддержки НетChrome Android Нет поддержки НетEdge Mobile Нет поддержки НетFirefox Android Нет поддержки НетOpera Android Нет поддержки НетSafari iOS Полная поддержка ДаSamsung Internet Android Нет поддержки Нет
font-displayChrome Полная поддержка 60Edge Нет поддержки НетFirefox Полная поддержка 58IE Нет поддержки НетOpera Полная поддержка 47Safari Полная поддержка ДаWebView Android Полная поддержка 60Chrome Android Полная поддержка 60Edge Mobile Нет поддержки НетFirefox Android Полная поддержка 58Opera Android Полная поддержка 47Safari iOS Полная поддержка ДаSamsung Internet Android Нет поддержки Нет
font-familyChrome Полная поддержка 4Edge Полная поддержка 12Firefox Полная поддержка 3.5IE Полная поддержка 6Opera Полная поддержка 9Safari Полная поддержка 3.1WebView Android Полная поддержка 2.2Chrome Android ? Edge Mobile Полная поддержка 12Firefox Android Полная поддержка 4Opera Android Полная поддержка 12Safari iOS Полная поддержка 3.1Samsung Internet Android Полная поддержка Да
font-feature-settingsChrome Нет поддержки НетEdge Нет поддержки НетFirefox Полная поддержка 34
Замечания
Полная поддержка 34
Замечания
Замечания The ISO/IEC CD 14496-22 3rd edition suggests using the ssty feature to provide glyph variants more suitable for use in scripts (for example primes used as superscripts). Starting with Firefox 29, this is done automatically by the MathML rendering engine. The ISO/IEC CD 14496-22 3rd edition also suggests applying the dtls feature to letters when placing mathematical accents to get dotless forms (for example dotless i, j with a hat). Starting with Firefox 35, this is done automatically by the MathML rendering engine. You can override the default values determined by the MathML rendering engine with CSS.
Полная поддержка 15
С префиксом Замечания
С префиксом Требует вендорный префикс: -moz-
Замечания From Firefox 4 to Firefox 14 (inclusive), Firefox supported an older, slightly different syntax. See OpenType Font Feature support in Firefox 4.
IE Нет поддержки НетOpera Нет поддержки НетSafari Нет поддержки НетWebView Android Нет поддержки НетChrome Android Нет поддержки НетEdge Mobile Нет поддержки НетFirefox Android Полная поддержка 34
Замечания
Полная поддержка 34
Замечания
Замечания The ISO/IEC CD 14496-22 3rd edition suggests using the ssty feature to provide glyph variants more suitable for use in scripts (for example primes used as superscripts). Starting with Firefox 29, this is done automatically by the MathML rendering engine. The ISO/IEC CD 14496-22 3rd edition also suggests applying the dtls feature to letters when placing mathematical accents to get dotless forms (for example dotless i, j with a hat). Starting with Firefox 35, this is done automatically by the MathML rendering engine. You can override the default values determined by the MathML rendering engine with CSS.
Полная поддержка 15
С префиксом Замечания
С префиксом Требует вендорный префикс: -moz-
Замечания From Firefox 4 to Firefox 14 (inclusive), Firefox supported an older, slightly different syntax. See OpenType Font Feature support in Firefox 4.
Opera Android Нет поддержки НетSafari iOS Нет поддержки НетSamsung Internet Android Нет поддержки Нет
font-variation-settingsChrome Полная поддержка 62Edge Нет поддержки НетFirefox Полная поддержка 60
Отключено
Полная поддержка 60
Отключено
Отключено From version 60: this feature is behind the layout.css.font-variations.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Нет поддержки НетOpera Полная поддержка 49Safari Нет поддержки НетWebView Android Полная поддержка 62Chrome Android Полная поддержка 62Edge Mobile Нет поддержки НетFirefox Android Полная поддержка 60
Отключено
Полная поддержка 60
Отключено
Отключено From version 60: this feature is behind the layout.css.font-variations.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Полная поддержка ДаSafari iOS Нет поддержки НетSamsung Internet Android Нет поддержки Нет
font-styleChrome Полная поддержка 4Edge ? Firefox Полная поддержка 3.5IE Полная поддержка 4Opera Полная поддержка 10Safari Полная поддержка 3.1WebView Android Полная поддержка ДаChrome Android ? Edge Mobile ? Firefox Android Полная поддержка 4Opera Android Полная поддержка 10Safari iOS Полная поддержка ДаSamsung Internet Android Полная поддержка Да
font-weightChrome Полная поддержка 4Edge Полная поддержка 12Firefox Полная поддержка 3.5IE Полная поддержка 4Opera Полная поддержка 10Safari Полная поддержка 3.1WebView Android Полная поддержка ДаChrome Android Полная поддержка ДаEdge Mobile Полная поддержка 12Firefox Android Полная поддержка 4Opera Android Полная поддержка 10Safari iOS Полная поддержка ДаSamsung Internet Android Полная поддержка Да
srcChrome Полная поддержка 4Edge Полная поддержка 12Firefox Полная поддержка 3.5IE Полная поддержка 6Opera Полная поддержка 9Safari Полная поддержка 3.1WebView Android Полная поддержка 2.2Chrome Android ? Edge Mobile Полная поддержка 12Firefox Android Полная поддержка 4Opera Android Полная поддержка 12Safari iOS Полная поддержка 3.1Samsung Internet Android Полная поддержка Да
unicode-rangeChrome Полная поддержка ДаEdge Полная поддержка ДаFirefox Полная поддержка 36IE Полная поддержка 9Opera Полная поддержка ДаSafari Полная поддержка ДаWebView Android ? Chrome Android ? Edge Mobile Полная поддержка ДаFirefox Android Полная поддержка 36Opera Android ? Safari iOS Полная поддержка ДаSamsung Internet Android Полная поддержка Да

Легенда

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

See also

Метки документа и участники

Внесли вклад в эту страницу: WDD, gudkovdanila, Luboshenko, Fapalz, wbamberg
Обновлялась последний раз: WDD,