font-variant-ligatures

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

Сводка

Свойство CSS Font-variant-ligatures контролирует, какие лигатуры и контекстные формы используются в текстовом содержимом элемента, к которому применяется. Это повышает гармоничность форм получаемого в результате текста.

Начальное значениеnormal
Применяется кall elements and text. Это также применяется к ::first-letter и ::first-line.
Наследуетсяда
Обработка значениякак указано
Animation typediscrete

Синтаксис

css
font-variant-ligatures: normal;
font-variant-ligatures: none;
font-variant-ligatures: common-ligatures; /* <common-lig-values> */
font-variant-ligatures: no-common-ligatures; /* <common-lig-values> */
font-variant-ligatures: discretionary-ligatures; /* <discretionary-lig-values> */
font-variant-ligatures: no-discretionary-ligatures; /* <discretionary-lig-values> */
font-variant-ligatures: historical-ligatures; /* <historical-lig-values> */
font-variant-ligatures: no-historical-ligatures; /* <historical-lig-values> */
font-variant-ligatures: contextual; /* <contextual-alt-values> */
font-variant-ligatures: no-contextual; /* <contextual-alt-values> */
font-variant-ligatures: contextual; /* <no-historical-ligatures> <common-ligatures> */

/* Глобальные значения */
font-variant-ligatures: inherit;
font-variant-ligatures: initial;
font-variant-ligatures: unset;

Значения

normal

Это ключевое слово ведёт к активации обычных лигатур и контекстных форм, необходимых для корректного рендеринга. Активируемые лигатуры и формы зависят от шрифта, языка и типа письма. Это значение по умолчанию.

none

Это ключевое слово устанавливает, что все лигатуры и контекстные формы отключены, даже распространённые.

<common-lig-values>

Эти значения контролируют наиболее распространённые лигатуры, такие как лигатуры для сочетаний fi, ffi, th или подобных. Они относятся к значениям liga и clig в OpenType. Допустимы два значения:

  • common-ligatures активирует эти лигатуры. Обратите внимание, что ключевое слово normal активирует лигатуры.
  • no-common-ligatures отключает эти лигатуры.
<discretionary-lig-values>

Эти значения управляют определёнными лигатурами, специфичными для шрифта и определяемыми дизайнером шрифта. Они соответствуют значениям OpenType hlig. Доступны два значения:

  • discretionary-ligatures активирует данные лигатуры.
  • no-discretionary-ligatures деактивирует лигатуры. Обратите внимание, обычно, ключевое слово normal также деактивирует лигатуры.
<historical-lig-values>

(ß) Эти значения контролируют лигатуры, которые исторически использовались в старых книгах, например, немецкий tz ("tz диаграф", прим. перев.). Они соответствуют значениям OpenType hlig. Доступны два значения:

  • historical-ligatures активирует данные лигатуры.
  • no-historical-ligatures деактивирует лигатуры. Обратите внимание, обычно, ключевое слово normal также деактивирует лигатуры.
<contextual-alt-values>

Эти значения определяют, адаптируются ли буквы к своему контексту, то есть адаптируются ли они к окружающим их буквам. Эти значения соответствуют вычисленным значениям OpenType. Возможны два значения:

  • contextual указывает, что должны использоваться контекстные альтернативы. Обратите внимание, что ключевое слово normal обычно также активирует лигатуры.
  • no-contextual предотвращает их использование.

Соответствующий правилам синтаксис

font-variant-ligatures = 
normal |
none |
[ <common-lig-values> || <discretionary-lig-values> || <historical-lig-values> || <contextual-alt-values> ]

<common-lig-values> =
common-ligatures |
no-common-ligatures

<discretionary-lig-values> =
discretionary-ligatures |
no-discretionary-ligatures

<historical-lig-values> =
historical-ligatures |
no-historical-ligatures

<contextual-alt-values> =
contextual |
no-contextual

Примеры

css
p {
  font-variant-ligatures: none;
}

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

Specification
CSS Fonts Module Level 4
# font-variant-ligatures-prop

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

BCD tables only load in the browser