В процессе перевода.

@font-face CSS @-правило позволяет указать шрифты для отображения текста на веб-страницах. Позволяет загрузить специфичный шрифт на компьютер пользователя, устраняется необходимость зависеть от ограниченного количества шрифтов, установленных пользователями на их компьютерах. Это правило может использоваться не только на верхнем уровне 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-адрес расположения удаленного файла шрифта или имя шрифта на компьютере пользователя.
unicode-range
Диапазон Unicode кодов, который будет использоваться в шрифте.

Formal syntax

@font-face {
  [ font-family: <family-name>; ] ||
  [ src: [ <url> [ format(<string>#) ]? | <font-face-name> ]#; ] ||
  [ unicode-range: <urange>#; ] ||
  [ font-variant: <font-variant>; ] ||
  [ font-feature-settings: normal | <feature-tag-value>#; ] ||
  [ font-variation-settings: normal | [ <string> <number>] # ||
 [ font-stretch: <font-stretch>; ] ||
  [ font-weight: <weight>; ] ||
  [ font-style: <style>; ]
}

где
<family-name> = <string> | <custom-ident>+
<feature-tag-value> = <string> [ <integer> | on | off ]?

Примеры

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

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

<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;
}

Notes

  • Web fonts are subject to the same domain restriction (font files must be on the same domain as the page using them), unless HTTP access controls are used to relax this restriction.
  • Because there are no defined MIME types for TrueType, OpenType, and Web Open File Format (WOFF) fonts, the MIME type of the file specified is not considered.
  • @font-face не может быть объявлен внутри CSS-селектора. Следующий пример не будет работать:
    .className { 
      @font-face { 
        font-family: MyHelvetica; 
        src: local("Helvetica Neue Bold"), local("HelveticaNeue-Bold"),
            url(MgOpenModernaBold.ttf);
        font-weight: bold; 
      } 
    }

Specifications

Specification Status Comment
WOFF File Format 2.0
Определение 'WOFF2 font format' в этой спецификации.
Кандидат в рекомендации Font format specification with new compression algorithm
WOFF File Format 1.0
Определение 'WOFF font format' в этой спецификации.
Рекомендация Font format specification
CSS Fonts Module Level 3
Определение '@font-face' в этой спецификации.
Кандидат в рекомендации Initial definition

Browser compatibility

Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
Basic support 4.0 (Да) 3.5 (1.9.1) 4.0 10.0 3.1
WOFF 6.0 (Да) 3.5 (1.9.1) 9.0 11.10 5.1
WOFF2 38 (Да) 39 (39)[1] Нет 24 Нет
SVG Fonts[2] (Да) Нет Нет[3] Нет (Да) (Да)
unicode-range (Да) (Да)

36 (36)

9.0 (Да) (Да)
Feature Android Edge Firefox Mobile (Gecko) IE Mobile Opera Mini Opera Mobile Safari Mobile
Basic support (Да) (Да) 1.0 (1.9.1) ? Нет 10.0 (Да)
WOFF 4.4 (Да) 5.0 (5.0) 10.0 Нет 11.0 5.0
WOFF2 Нет (Да) 39.0 (39.0)[1] Нет ? ? Нет
SVG Fonts[2] ? Нет Нет[3] ? Нет 10.0 (Да)
unicode-range ? (Да) 36.0 (36.0) ? Нет ? (Да)

[1] WOFF2 supports from Gecko 35 to Gecko 38 included is only activated by default on Aurora and Nightly versions. To use it on Beta and Release versions, the user needs to set the gfx.downloadable_fonts.woff2.enabled preference to true.

[2] Support for SVG Fonts was dropped in favor of allowing SVG glyphs within OpenType font packages.

[3] For Gecko there was баг 119490 filed for implementing SVG Fonts, though as SVG Fonts got superseded by SVG glyphs within OpenType font packages, the bug got closed.

Notes

  • Support of the Embedded OpenType font format is not included in the compatibility table because it is a proprietary feature. Prior to IE 9.0, IE supported only this format.
  • TrueType and OpenType are not included because they are superseded by WOFF.
  • The same origin policy is not implemented in WebKit based browsers like Safari and Mobile Safari. This was also true for Blink based browsers, until September, 2014 - Chrome 37 and Opera 24.

See also

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

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