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

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

Попробуйте

font-variant-ligatures: normal;

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

font-variant-ligatures: common-ligatures;

<section id="default-example">
  <div id="example-element">
    <p>Difficult waffles</p>
  </div>
</section>

@font-face {
  font-family: "Fira Sans";
  src:
    local("FiraSans-Regular"),
    url("/shared-assets/fonts/FiraSans-Regular.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
}

section {
  font-family: "Fira Sans", sans-serif;
  margin-top: 10px;
  font-size: 1.5em;
}

Синтаксис

/* Keyword values */
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> */

/* Two keyword values */
font-variant-ligatures: no-contextual common-ligatures;

/* Four keyword values */
font-variant-ligatures: common-ligatures no-discretionary-ligatures
  historical-ligatures contextual;

/* Global values */
font-variant-ligatures: inherit;
font-variant-ligatures: initial;
font-variant-ligatures: revert;
font-variant-ligatures: revert-layer;
font-variant-ligatures: unset;

Значения

Это свойство задаётся одним ключевым словом или списком следующих значений, разделённых пробелами:

normal

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

none

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

<common-lig-values>

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

• common-ligatures включает эти лигатуры. Обратите внимание: ключевое слово normal включает эти лигатуры.
• no-common-ligatures отключает эти лигатуры.

<discretionary-lig-values>

Эти значения управляют конкретными лигатурами, определяемыми шрифтом и его разработчиком. Им соответствует значение OpenType dlig. Возможны два значения:

• discretionary-ligatures включает эти лигатуры.
• no-discretionary-ligatures отключает лигатуры. Обратите внимание: ключевое слово normal обычно отключает эти лигатуры.

<historical-lig-values>

Эти значения управляют историческими лигатурами, которые использовались в старых книгах. Например, немецкий диграф tz может отображаться как ꜩ. Им соответствует значение OpenType hlig. Возможны два значения:

• historical-ligatures включает эти лигатуры.
• no-historical-ligatures отключает лигатуры. Обратите внимание: ключевое слово normal обычно отключает эти лигатуры.

<contextual-alt-values>

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

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

Примеры

Настройка лигатур и контекстных форм шрифта

HTML

<link href="//fonts.googleapis.com/css?family=Lora" rel="stylesheet" />
<p class="normal">
  normal<br />
  if fi ff tf ft jf fj
</p>
<p class="none">
  none<br />
  if fi ff tf ft jf fj
</p>
<p class="common-ligatures">
  common-ligatures<br />
  if fi ff tf ft jf fj
</p>
<p class="no-common-ligatures">
  no-common-ligatures<br />
  if fi ff tf ft jf fj
</p>
<p class="discretionary-ligatures">
  discretionary-ligatures<br />
  if fi ff tf ft jf fj
</p>
<p class="no-discretionary-ligatures">
  no-discretionary-ligatures<br />
  if fi ff tf ft jf fj
</p>
<p class="historical-ligatures">
  historical-ligatures<br />
  if fi ff tf ft jf fj
</p>
<p class="no-historical-ligatures">
  no-historical-ligatures<br />
  if fi ff tf ft jf fj
</p>
<p class="contextual">
  contextual<br />
  if fi ff tf ft jf fj
</p>
<p class="no-contextual">
  no-contextual<br />
  if fi ff tf ft jf fj
</p>

CSS

p {
  font-family: "Lora", serif;
}
.normal {
  font-variant-ligatures: normal;
}

.none {
  font-variant-ligatures: none;
}

.common-ligatures {
  font-variant-ligatures: common-ligatures;
}

.no-common-ligatures {
  font-variant-ligatures: no-common-ligatures;
}

.discretionary-ligatures {
  font-variant-ligatures: discretionary-ligatures;
}

.no-discretionary-ligatures {
  font-variant-ligatures: no-discretionary-ligatures;
}

.historical-ligatures {
  font-variant-ligatures: historical-ligatures;
}

.no-historical-ligatures {
  font-variant-ligatures: no-historical-ligatures;
}

.contextual {
  font-variant-ligatures: contextual;
}

.no-contextual {
  font-variant-ligatures: no-contextual;
}

Результат

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

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

См. также

• font-variant
• font-variant-caps
• font-variant-emoji
• font-variant-east-asian
• font-variant-numeric
• font-variant-position
• Модуль CSS Fonts