Свойство CSS font-variant-alternates

Свойство font-variant-alternates управляет выбором альтернативных глифов.

Имена функций альтернативных глифов (styleset, stylistic, character-variant, ornament, swash, annotation) могут быть определены в @font-feature-values. В таблице стилей разрешены человекочитаемые имена, указанные в @font-feature-values.

Начальное значение	normal
Применяется ко	Ко всем элементам. Также применяется к ::first-letter и ::first-line.
Наследуется	Да.
Анимация	Нет.
Версия	CSS3
Синтаксис DOM	object.style.fontVariantAlternates = "normal";

Синтаксис

Синтаксис свойства CSS font-variant-alternates

css

font-variant-alternates: normal | historical-forms | stylistic() | styleset() | character-variant() | swash() | ornaments() | annotation();

Пример свойства font-variant-alternates:

Пример свойства CSS font-variant-alternates

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      @font-feature-values "Leitura Display Swashes" {
        @swash {
          fancy: 1;
        }
      }
      p {
        font-size: 2rem;
      }
      .variant {
        font-family: Leitura Display Swashes;
        font-variant-alternates: swash(fancy);
      }
    </style>
  </head>
  <body>
    <h2>Font-variant-alternates property example</h2>
    <p>This paragraph uses the swash alternate.</p>
    <p class="variant">This paragraph uses the swash alternate.</p>
  </body>
</html>

Try it Yourself »

Результат

CSS font-variant-alternates Property

Значения

Значение	Описание
normal	Ни одна из функций не включена.
historical-forms	Включает отображение исторических форм.
stylistic()	Включает отображение стилистических альтернатив.
styleset()	Включает отображение с использованием стилистических наборов.
character-variant()	Включает конкретные стилистические альтернативы для символов.
swash()	Включает глифы swash.
ornaments()	Включает отображение орнаментов.
annotation()	Включает альтернативные формы аннотаций.
initial	Заставляет свойство использовать значение по умолчанию.
inherit	Наследует свойство от родительского элемента.

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

Браузер	Поддержка
Chrome	36+
Edge	79+
Firefox	34+
Safari	10+
Opera	23+

Практика

Какую функцию выполняет свойство 'font-variant-alternates' в CSS?

Оно помогает управлять методами поисковой оптимизации.Оно позволяет включать стилистические наборы и варианты символов для шрифтов OpenType.Оно изменяет цвет текста в документе CSS.Оно позволяет выбирать альтернативы для нормальных, маленьких прописных или обычных лигатур в шрифте.Оно используется для обозначения темы веб-страницы.

Свойство CSS font-variant-alternates ​

Синтаксис ​

Пример свойства font-variant-alternates: ​

Результат ​

Значения ​

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