Чтобы отключить одну лигатуру в веб-надписи, оберните её буквы во встроенный элемент span и отключите для него соответствующую функцию лигатур. Для остального текста сохраняются его настройки. В CSS нет общего переключателя, который отключал бы одну именованную лигатуру во всём шрифте. Элементы управления лигатурами в MDN задают категории функций, а не отдельные подстановки.

Это руководство предназначено для пользователя Mac, который редактирует HTML и CSS веб-страницы. Конкретная задача — отделить первую fi в синтетической надписи fine flake office fine, сохранив лигатуры в остальном тексте. Небольшой локальный тест наглядно показывает разницу между изменением одной позиции и изменением целой функции.

Что CSS может отключить выборочно?

Функция лигатур может включать несколько подстановок. Отключить liga означает отключить эту функцию для затронутого текста; это не означает выбрать конкретную пару букв. Аналогично, font-variant-ligatures: no-common-ligatures управляет обычными лигатурами через liga и clig. Конкретные подстановки зависят от шрифта. MDN: font-variant-ligatures

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

Желаемый результат Подходящий способ Условие
Разделить одно вхождение fi Обернуть это вхождение и отключить его функцию локально Вы можете редактировать разметку
Убрать дискреционные лигатуры, сохранив обычные Использовать no-discretionary-ligatures для нужного элемента Нежелательная подстановка относится к dlig
Убрать все fi, сохранив остальные обычные лигатуры Использовать документированную функцию, специфичную для шрифта, если она доступна Шрифт должен предоставлять необходимый элемент управления
Изменить одно вхождение в приложении, которое нельзя редактировать Найти документированное форматирование отдельных символов в этом приложении Веб-CSS не определяет возможности настольного приложения

Для поддерживаемых категорий используйте font-variant-ligatures. MDN рекомендует по возможности применять свойства шрифтов более высокого уровня; font-feature-settings даёт доступ к низкоуровневым функциям OpenType в остальных случаях. Запись font-feature-settings: \"liga\" off не позволяет управлять отдельной парой букв. MDN: font-feature-settings

Сравните варианты локально на Mac

Сначала используйте отдельный файл, чтобы сравнить результат без посторонних стилей страницы. В TextEdit выберите Файл > Новый, затем Формат > Обычный текст. Введите пример целиком, сохраните его как ligature-demo.html и при запросе выберите Использовать .html. Так Apple документирует создание HTML-файла в TextEdit. Apple: Работа с HTML-документами в TextEdit на Mac

Откройте сохранённый файл в браузере. В примере используются локально доступные шрифты, библиотеки или загрузки не требуются. Список шрифтов приведён для примера: заметить разницу можно, только если выбранный шрифт содержит нужные лигатуры. Проверяйте отображение в браузере; конкретный вид глифов не предполагается.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Ligature comparison</title>
  <style>
    body {
      margin: 2rem;
      color: #222;
      background: #fff;
      font-family: system-ui, sans-serif;
    }

    main {
      max-width: 42rem;
    }

    .sample {
      font-family: Georgia, "Times New Roman", serif;
      font-size: 2.5rem;
      line-height: 1.5;
      letter-spacing: normal;
      font-variant-ligatures: common-ligatures;
    }

    .separate-pair,
    .all-common-off {
      font-variant-ligatures: no-common-ligatures;
    }
  </style>
</head>
<body>
  <main>
    <h2>Baseline</h2>
    <p class="sample">fine flake office fine</p>

    <h2>First pair separated</h2>
    <p class="sample"><span class="separate-pair">fi</span>ne flake office fine</p>

    <h2>All common ligatures disabled</h2>
    <p class="sample all-common-off">fine flake office fine</p>
  </main>
</body>
</html>

В средней строке элемент span содержит обе буквы целевой fi. Для остальной части этой строки сохраняется унаследованная настройка обычных лигатур. Для такой группировки чисто стилистических элементов подходит span: WHATWG определяет его как элемент, представляющий дочерние элементы, не добавляя собственного значения. WHATWG: Элемент span

Проверьте сравнение в три этапа:

  1. Сравните первую fine в исходной и средней строках. Обратите внимание на форму букв, а не только на общую ширину.
  2. Сравните flake, office и последнюю fine в этих строках. Они находятся вне исключения, поэтому их исходные настройки функции должны сохраниться.
  3. Сравните нижнюю строку с остальными. Это пример более широкого воздействия: в этой строке обычные лигатуры отключены целиком.

Если все три строки выглядят одинаково, сравнение не даёт результата. Измените шрифт примера на тот, который собираетесь использовать, и выберите последовательности букв, для которых в документации этого шрифта указаны лигатуры. Объявление CSS не может показать подстановку, которой нет в выбранном шрифте.

Примените исключение, не нарушая поток текста

Для короткой надписи поместите элемент span непосредственно вокруг всей последовательности, которую хотите разделить. Оставьте соседние символы в исходном коде рядом, как в примере с fi и ne. Не вставляйте пробел или перевод строки внутрь слова только ради более удобного оформления разметки.

Для span необходимо изменить настройку функции. Простое помещение одной буквы в элемент span без других стилей — ненадёжный способ разорвать лигатуру: спецификация текстового содержимого W3C требует продолжать формирование текста через границы встроенных элементов, если эффективное форматирование не меняется. В ней также описаны случаи, когда формирование текста нарушают поля, рамки, внутренние отступы или другое форматирование. W3C: Формирование текста через границы элементов

Оставьте это исключение обычным встроенным элементом span. Добавление inline-block, интервалов или элементов обёртки для компоновки приведёт к дополнительным решениям по размещению, которые для этой задачи не нужны. После применения настройки типографики сузьте окно браузера и проверьте надпись в предназначенном для неё контейнере. Проверьте, не изменился ли перенос строки: другой вариант глифа может повлиять на занимаемое текстом пространство.

Для более длинных последовательностей явно определите нужную границу. Если нежелательная подстановка затрагивает ffi, обёртка только для fi также создаст границу форматирования внутри большей последовательности. Проверьте целое слово и соседние буквы, а не предполагайте, что все перекрывающиеся подстановки работают независимо.

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

Что делать, если лигатура остаётся или исчезают другие лигатуры?

Используйте сравнение как последовательность диагностических проверок, прежде чем добавлять новые переопределения.

Сначала проверьте категорию функции. В примере рассматриваются обычные лигатуры. Если в документации шрифта нежелательная подстановка отнесена к dlig, примените для исключения no-discretionary-ligatures. Контекстная подстановка может затрагивать calt, управляемое через no-contextual; эта настройка может повлиять и на другие контекстные формы внутри выбранного текста. Определения категорий функций в MDN

Затем проверьте конфликтующие настройки. Существующее объявление font-feature-settings может переопределить выбор функций, задаваемый через font-variant-ligatures. Согласно спецификации W3C, низкоуровневые настройки функций применяются позже при разрешении функций. Проверьте это объявление, прежде чем заключать, что подход со span не поддерживается. W3C: Разрешение функций и вариаций шрифта

Затем проверьте область действия. Если лигатуры пропадают в других словах, убедитесь, что класс исключения назначен только целевому элементу span. Настройка для абзаца или его контейнера охватывает гораздо больше текста. В локальном примере нижняя строка намеренно демонстрирует такое более широкое воздействие.

Наконец, отличайте необязательную типографику от обязательного формирования текста. font-variant-ligatures: none отключает больше, чем нужно для этой задачи, а обязательные лигатуры не входят в перечень отключаемых им функций. W3C прямо указывает, что это свойство сохраняет обязательные лигатуры. W3C: Лигатуры

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

Даёт ли библиотека формирования текста более точный контроль?

HarfBuzz предоставляет диапазоны функций через hb_feature_t: функция задаётся тегом, значением, включительным началом и исключительным концом, выраженными через значения кластеров. Приложение, вызывающее эту библиотеку формирования текста, может применить настройку функции к ограниченному диапазону. Но это всё ещё диапазон действия функции, а не универсальный выбор одной именованной лигатуры. HarfBuzz: hb_feature_t

Этот API относится к другому уровню, чем обычный CSS страницы. Документированный механизм HarfBuzz передаёт запросы функций в hb_shape(). В примерах описаны буферы формирования текста и правила поиска шрифта, а не дополнительная возможность таблиц стилей браузера. Для задачи с веб-надписью на Mac создание собственного конвейера формирования текста потребовало бы лишней работы по сравнению со встроенным исключением. HarfBuzz: Функции OpenType

В завершение проверьте целевую пару букв, окружающие лигатуры и надпись при фактической ширине отображения. Оставьте самое простое работающее исключение: вся нежелательная последовательность внутри одного элемента span, соответствующая функция отключена только для неё, а для остального текста сохраняются нужные настройки.

Источники