Свойство CSS font-variant-ligatures
Свойство font-variant-ligatures управляет лигатурами и контекстными формами, которые создают более гармоничные начертания.
Это свойство принимает следующие значения:
- normal
- none
<common-lig-values><discretionary-lig-values><historical-lig-values><contextual-alt-values>
| Начальное значение | normal |
|---|---|
| Применяется ко | Всем элементам. Также применяется к ::first-letter и ::first-line. |
| Наследуется | Да. |
| Анимация | Нет. |
| Версия | CSS3 |
| Синтаксис DOM | object.style.fontVariantLigatures = "normal"; |
Синтаксис
Синтаксис свойства CSS font-variant-ligatures
font-variant-ligatures: normal | none | <common-lig-values> | <discretionary-lig-values> | <historical-lig-values> | <contextual-alt-values>;Пример свойства font-variant-ligatures:
Пример использования значений no-common-ligatures и common-ligatures свойства CSS font-variant-ligatures
<!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 поддерживает несколько типов лигатур. Они соответствуют широко используемому формату OpenType. Рассмотрим каждый из них.
Обычные лигатуры
Эти лигатуры чаще всего используются, когда символы «наступают» друг на друга. Из-за этого текст становится менее читабельным и неудобным для восприятия. В качестве примера можно взять сочетание строчных букв «i» и «f». Включение лигатур объединяет эти две буквы, что облегчает чтение. В CSS обычные лигатуры включены по умолчанию. Однако вы можете включить или отключить их вручную следующим образом:
Свойство CSS font-variant-ligatures
/* Enable common ligatures */
font-variant-ligatures: common-ligatures;
/* Disable common ligatures */
font-variant-ligatures: no-common-ligatures;Дополнительные лигатуры
Дополнительные лигатуры, также называемые декоративными, используются скорее для украшения. На самом деле, они не предназначены для улучшения читаемости текста. В CSS эти лигатуры отключены по умолчанию и являются дополнительными. Это означает, что вы можете включить их по мере необходимости. Включение или отключение дополнительных лигатур выполняется следующим образом:
Свойство CSS font-variant-ligatures
/* Enable discretionary ligatures */
font-variant-ligatures: discretionary-ligatures;
/* Disable discretionary ligatures */
font-variant-ligatures: no-discretionary-ligatures;Исторические лигатуры
Исторические лигатуры также предназначены для декоративных целей. Вы можете включить или отключить их с помощью следующего кода:
Свойство CSS font-variant-ligatures
/* Enable historical ligatures */
font-variant-ligatures: historical-ligatures;
/* Disable historical ligatures */
font-variant-ligatures: no-historical-ligatures;Контекстные замены
Контекстные замены полезны для улучшения читабельности. Они обеспечивают лучшее соединение символов, образующих лигатуру. Контекстные замены особенно полезны для слитных шрифтов. Благодаря им штрихи правильно соединяются от одного символа к другому, сохраняя непрерывный поток.
Значения
| Значение | Описание |
|---|---|
| normal | Активация форм и лигатур зависит от шрифта, языка и типа письма. Это значение по умолчанию для данного свойства. |
| none | Все лигатуры и контекстные формы отключены. |
<common-lig-values> | Управляет всеми лигатурами. |
<discretionary-lig-values> | Управляет конкретными лигатурами. |
<historical-lig-values> | Управляет лигатурами, используемыми в старых книгах. |
<contextual-alt-values> | Управляет адаптацией букв в зависимости от их контекста. |
| initial | Заставляет свойство использовать значение по умолчанию. |
| inherit | Наследует свойство от родительского элемента. |
Практика
Что контролирует свойство CSS 'font-variant-ligatures'?