CSS правило @font-feature-values

Правило @font-feature-values задаёт именованное значение для определённых шрифтовых признаков семейства шрифтов.

Его можно использовать на верхнем уровне CSS или внутри условного группового правила CSS.

Правило @font-feature-values может содержать любое из следующих значений признаков:

@annotation
@ornaments
@stylistic
@styleset
@character-variant

Помимо стандартного глифа символа, для шрифта могут существовать другие альтернативные глифы (например, глифы с завитками, стилистические альтернативы). Шрифт может содержать несколько глифов в этих альтернативах, каждый из которых имеет свой индекс. С помощью правила @font-feature-values можно создать имя для этого индекса, после чего его можно использовать вместе с font-variant-alternates. Обратите внимание, что это правило требует загрузки соответствующего шрифта и работает исключительно со свойством font-variant-alternates.

Синтаксис

Синтаксис правила CSS @font-feature-values

css

@font-feature-values <family-name> {
  @swash { name: index; }
  @annotation { name: index; }
  @ornaments { name: index; }
  @stylistic { name: index; }
  @styleset { name: index; }
  @character-variant { name: index; }
}

Пример использования правила @font-feature-values:

Пример правила CSS @font-feature-values

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      @font-feature-values "Leitura Display Swashes" {
        @swash {
          fancy: 1;
        }
      }
      p {
        font-size: 1.5rem;
      }
      .variant {
        font-family: Leitura Display Swashes;
        font-variant-alternates: swash(fancy);
      }
    </style>
  </head>
  <body>
    <h2>@Font-feature-values at-rule example</h2>
    <p>
      The font-variant-alternates CSS property controls the usage of alternate glyphs. These alternate glyphs may be referenced by alternative names defined in @font-feature-values.
    </p>
    <p>This property is supported by Firefox and Safari.</p>
    <p class="variant">This property is supported by Firefox and Safari.</p>
  </body>
</html>

Try it Yourself »

Значения

Значение	Описание
@swash	Указывает имя признака, которое работает с функциональной нотацией swash() свойства font-variant-alternates.
@annotation	Указывает имя признака, которое работает с функциональной нотацией annotation() свойства font-variant-alternates.
@ornaments	Указывает имя признака, которое работает с функциональной нотацией ornaments() свойства font-variant-alternates.
@stylistic	Указывает имя признака, которое работает с функциональной нотацией stylistic() свойства font-variant-alternates.
@styleset	Указывает имя признака, которое работает с функциональной нотацией styleset() свойства font-variant-alternates.
@character-variant	Указывает имя признака, которое работает с функциональной нотацией character-variant() свойства font-variant-alternates.

Практика

Какие из следующих утверждений верны для CSS-свойства 'font-feature-values'?

'font-feature-values' применяет признак OpenType'font-feature-values' применяется ко всем доступным признакам OpenTypeВы не можете использовать более одного семейства шрифтов с 'font-feature-values''font-feature-values' не совместим ни с одной версией Internet Explorer или Safari'font-feature-values' используется для настройки кернинга или позиционирования отдельных букв

CSS правило @font-feature-values ​

Синтаксис ​

Пример использования правила @font-feature-values: ​

Значения ​

Практика ​

CSS правило @font-feature-values

Синтаксис

Пример использования правила @font-feature-values:

Значения

Практика