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

@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");
}

Syntax

Descriptors

font-family
Указывает имя шрифта.
src
Задает ресурс, содержащий данные шрифта. Это может быть URL-адрес расположения удаленного файла шрифта или имя шрифта на компьютере пользователя.
font-variant
A font-variant значение.
font-stretch
A font-stretch значение.
font-weight
A font-weight значение.
font-style
A font-style значение.
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 ]?

Examples

This example simply specifies a downloadable font to use, applying it to the entire body of the document:

View the live example

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

In this example, the user's local copy of "Helvetica Neue Bold" is used; if the user does not have that font installed (two different names are tried), then the downloadable font named "MgOpenModernaBold.ttf" is used instead:

@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 cannot be declared within a CSS selector. For example, the following will not work:
    .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

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

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