font-variant-ligatures

Базовая Широко поддерживается

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и версиях браузеров. Она доступна во всех браузерах с января 2020 года.

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

Попробовать

Синтаксис

/* 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;

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

Значения

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 предотвращает их использование.

Формальное определение

Начальное значение	`normal`
Применяется к	всем элементам и тексту. Также применяется к `::first-letter` и `::first-line`.
Наследуется	да
Вычисленное значение	как указано
Тип анимации	дискретный

Формальный синтаксис

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;
}

Результат

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

Спецификация
CSS Fonts Module Level 4 # font-variant-ligatures-prop

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

	Рабочий стол					Мобильный
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на IOS	Samsung Internet	WebView Android
`font-variant-ligatures`	3431	7979	34	2118	9.17	3431	34	2118	9.37	2.02.0	374.4
`common-ligatures`	31	79	34	18	7	31	34	18	7	2.0	4.4.3
`contextual`	31	79	34	18	7	31	34	18	7	2.0	4.4.3
`discretionary-ligatures`	31	79	34	18	7	31	34	18	7	2.0	4.4.3
`historical-ligatures`	31	79	34	18	7	31	34	18	7	2.0	4.4.3
`no-common-ligatures`	31	79	34	18	7	31	34	18	7	2.0	4.4.3
`no-contextual`	31	79	34	18	7	31	34	18	7	2.0	4.4.3
`no-discretionary-ligatures`	31	79	34	18	7	31	34	18	7	2.0	4.4.3
`no-historical-ligatures`	31	79	34	18	7	31	34	18	7	2.0	4.4.3
`none`	31	79	34	18	7	31	34	18	7	2.0	4.4.3
`normal`	31	79	34	18	7	31	34	18	7	2.0	4.4.3

См. также

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-ligatures