CSS свойство font-variant-ligatures

CSS-свойство font-variant-ligatures управляет тем, какие лигатуры и контекстные формы использует шрифт. Лигатура — это единый глиф, который гарнитура подставляет вместо двух или более символов, которые иначе столкнулись бы или выглядели бы неловко рядом друг с другом — классический пример — пара fi, где точка над i сталкивается с крюком f.

Лигатуры — это функция OpenType, встроенная в файл шрифта. Данное свойство лишь позволяет включать или отключать доступные лигатуры; если шрифт не содержит конкретной лигатуры, свойство не оказывает видимого эффекта. По этой причине font-variant-ligatures изменяет только внешний вид, но не исходный текст — копирование, поиск и программы чтения с экрана по-прежнему видят исходные символы.

font-variant-ligatures принимает одно ключевое слово из каждой из следующих групп (в любом порядке):

normal — позволяет шрифту самому решать (значение по умолчанию).
none — отключает все лигатуры и контекстные формы.
<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

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

Синтаксис

font-variant-ligatures: normal | none | <common-lig-values> | <discretionary-lig-values> | <historical-lig-values> | <contextual-alt-values>;

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

font-variant-ligatures: common-ligatures discretionary-ligatures no-contextual;

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

Два элемента span ниже отображают одинаковые символы с одинаковым шрифтом. В первом обычные лигатуры отключены, поэтому f и i отображаются как два отдельных глифа; во втором они включены, поэтому пара объединяется в один глиф fi.

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document </title>
    <style>
      div {
        font-family: Lora, serif;
        font-size: 35vw;
      }
      .gray {
        font-variant-ligatures: no-common-ligatures;
        color: #ccc;
      }
      .blue {
        font-variant-ligatures: common-ligatures;
        color: #1c87c9;
      }
    </style>
  </head>
  <body>
    <h2>Font-variant-ligatures property example</h2>
    <div>
      <span class="gray">fi</span>
      <span class="blue">fi</span>
    </div>
  </body>
</html>

Попробуйте сами »

Результат

![CSS свойство font-variant-ligatures](/uploads/media/default/0001/03/fc947bebf8b5cb8a0a41ea56ea12d1fd303a936c.png "fi rendered with and without common ligatures" width="420" height="200")

Типы лигатур

CSS распознаёт четыре семейства лигатур и контекстных форм, все они соответствуют широко используемому формату OpenType. Каждое семейство имеет собственную пару ключевых слов, поэтому их можно переключать независимо друг от друга.

Обычные лигатуры

Обычные лигатуры применяются, когда два символа иначе «сталкивались» бы друг с другом — пара строчных f + i является классическим примером. Их соединение делает текст удобным для чтения, поэтому большинство шрифтов и браузеров включают обычные лигатуры по умолчанию. Управляйте ими явно с помощью:

/* Enable common ligatures (the default) */
font-variant-ligatures: common-ligatures;

/* Disable common ligatures */
font-variant-ligatures: no-common-ligatures;

Декоративные лигатуры

Декоративные лигатуры (также называемые необязательными) существуют ради визуального украшения, а не удобочитаемости — например, изысканное соединение ct или st в декоративной гарнитуре. По умолчанию они отключены, поэтому их нужно явно включать там, где нужно украшение:

/* Enable discretionary ligatures */
font-variant-ligatures: discretionary-ligatures;

/* Disable discretionary ligatures */
font-variant-ligatures: no-discretionary-ligatures;

Исторические лигатуры

Исторические лигатуры воспроизводят формы, когда-то распространённые в старинных книгах и рукописях, например сочетания с длинной s (ſ). Как и декоративные лигатуры, они носят орнаментальный характер и по умолчанию отключены:

/* Enable historical ligatures */
font-variant-ligatures: historical-ligatures;

/* Disable historical ligatures */
font-variant-ligatures: no-historical-ligatures;

Контекстные альтернативы

Контекстные альтернативы улучшают читаемость, выбирая глиф, который плавно соединяется с соседними символами. Они наиболее заметны в связных письменностях (рукописные шрифты, арабский), где штрихи должны непрерывно перетекать от одного символа к другому. Управляйте ими с помощью:

/* Enable contextual alternates */
font-variant-ligatures: contextual;

/* Disable contextual alternates */
font-variant-ligatures: no-contextual;

Значения

Значение	Описание
normal	Активация форм и лигатур зависит от шрифта, языка и типа письма. Это значение по умолчанию для данного свойства.
none	Все лигатуры и контекстные формы отключены.
`<common-lig-values>`	Управляет всеми лигатурами.
`<discretionary-lig-values>`	Управляет определёнными лигатурами.
`<historical-lig-values>`	Управляет лигатурами, используемыми в старинных книгах.
`<contextual-alt-values>`	Управляет адаптацией букв к их контексту (`contextual` / `no-contextual`).
initial	Устанавливает свойство в значение по умолчанию (`normal`).
inherit	Наследует свойство от родительского элемента.

Когда использовать

В большинстве случаев normal является правильным выбором — дизайнер шрифта уже выбрал разумные значения по умолчанию. Используйте явные значения в следующих случаях:

Заголовок для отображения или логотипа нуждается в декоративных discretionary-ligatures, которые иначе не применялись бы.
Моноширинный блок / блок кода отображает лигатуры, которые вам не нужны (некоторые редакторы превращают != в единый глиф); none или no-common-ligatures восстанавливает буквальные символы.
Вы задали text-rendering: optimizeSpeed или анимируете текст, и замена лигатур вызывает мерцание — отключение может стабилизировать рендеринг.

Связанные свойства

font-variant — сокращённое свойство, объединяющее лигатуры с капителью, числовыми и другими вариантными функциями.
font-feature-settings — низкоуровневый доступ к тем же функциям OpenType по их четырёхбуквенным тегам (liga, dlig, hlig, calt).
font-kerning — управляет расстоянием между парами глифов, функция, которую чаще всего путают с лигатурами.
css-font-variant-caps-property и css-font-variant-numeric-property — родственные длинные формы font-variant-*.

Практика

Что контролирует CSS-свойство 'font-variant-ligatures'?

Управляет расстоянием между символамиУправляет регистром текстаУправляет отображением лигатур в текстеУправляет переносом текстаУправляет гарнитурой текста