font-feature-settings

Открывает доступ к расширенным типографическим функциям OpenType-шрифтов через четырёхбуквенные теги: лигатуры, дроби, строчные капители, альтернативные начертания и многое другое.

        
          
          /* Включить строчные капители и перечёркнутый ноль */.text {  font-feature-settings: "smcp", "zero";}/* Включить табличные цифры */.price-table td {  font-feature-settings: "tnum";}/* Отключить стандартные лигатуры */code {  font-feature-settings: "liga" 0;}
          /* Включить строчные капители и перечёркнутый ноль */
.text {
  font-feature-settings: "smcp", "zero";
}

/* Включить табличные цифры */
.price-table td {
  font-feature-settings: "tnum";
}

/* Отключить стандартные лигатуры */
code {
  font-feature-settings: "liga" 0;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

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

OpenType-шрифты хранят не только очертания букв, но и таблицу дополнительных функций: лигатуры (слияние нескольких символов в один глиф), альтернативные начертания, специальные формы цифр, исторические варианты символов и многое другое.

Браузер по умолчанию включает лишь часть этих функций, обычно стандартные лигатуры (liga) и кернинг (kern). Остальные остаются выключенными. font-feature-settings позволяет управлять любой функцией напрямую через её четырёхбуквенный идентификатор.

Идентификаторы тегов стандартизированы в спецификации OpenType: smcp всегда означает строчные капители, tnum — табличные цифры, frac — автоматические дроби. Этих тегов десятки, и список одинаков для всех шрифтов. Однако конкретный шрифт поддерживает только часть из них, только то, что заложил в него дизайнер. Если шрифт не реализует тег, браузер просто его проигнорирует.

        
          
          /* Значение по умолчанию */font-feature-settings: normal;/* Один тег — включить */font-feature-settings: "smcp";/* Один тег — выключить */font-feature-settings: "liga" 0;/* Несколько тегов */font-feature-settings: "smcp", "zero";/* Числовой вариант */font-feature-settings: "swsh" 2;
          /* Значение по умолчанию */
font-feature-settings: normal;

/* Один тег — включить */
font-feature-settings: "smcp";

/* Один тег — выключить */
font-feature-settings: "liga" 0;

/* Несколько тегов */
font-feature-settings: "smcp", "zero";

/* Числовой вариант */
font-feature-settings: "swsh" 2;

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Каждое значение — это тег в кавычках и необязательное число после него.

Тег — ровно четыре ASCII-символа. Больше или меньше будет синтаксической ошибкой.

Значение после тега:

• 1 или on — включить (подразумевается, если значение не указано);
• 0 или off — выключить;
• Целое число больше 1 — для функций с несколькими вариантами, например "swsh" 2 выбирает второй вариант каллиграфического начертания.

Несколько тегов перечисляются через запятую.

• liga — стандартные лигатуры (fi, fl, ff). Включены по умолчанию, можно отключить через "liga" 0.
• dlig — дискретные (необязательные) лигатуры.
• calt — контекстные альтернативы: автоматическая замена символов в зависимости от соседних знаков.
• hlig — исторические лигатуры.
• rlig — обязательные лигатуры.

• smcp — строчные капители для строчных букв.
• c2sc — строчные капители для заглавных букв.
• case — регистрозависимые формы пунктуации (скобки, кавычки поднимаются на уровень заглавных).

• lnum — цифры верхнего регистра (одинаковой высоты с заглавными буквами).
• onum — цифры старого стиля (с выносными элементами, выглядят как строчные буквы).
• tnum — табличные (моноширинные) цифры, полезны для выравнивания чисел в колонках.
• zero — перечёркнутый ноль, помогает отличить 0 от буквы O.
• frac — автоматическое форматирование дробей: 1/2 превращается в ½.
• sups — верхний индекс.
• subs — нижний индекс.

• swsh — каллиграфические (росчерковые) начертания. Значение указывает номер варианта.
• ss01–ss20 — стилистические наборы: полные наборы символов с альтернативным начертанием.
• hist — исторические формы символов.
• init, medi, fina, isol — начальные, срединные, конечные и изолированные формы (актуально для арабского письма и других систем).

• kern — кернинг. Включён по умолчанию.
• locl — локализованные формы: например, турецкая точечная İ вместо обычной I.
• mark, mkmk — позиционирование диакритических знаков над базовыми символами.

💡 font-feature-settings — низкоуровневое свойство. Когда нужны капители, дроби или лигатуры, лучше использовать более конкретные свойства: font-variant-caps, font-variant-numeric, font-variant-ligatures и другие font-variant-*. Они чище описывают намерение и лучше работают с каскадом.

💡 font-feature-settings можно задать прямо в @font-face — тогда включённые теги станут базовым поведением шрифта для всего сайта, а не только для конкретных селекторов.

💡 Если родительский элемент задаёт font-feature-settings с несколькими тегами, а дочернему нужно добавить ещё один, придётся перечислять все заново. Просто добавить один тег поверх унаследованного значения не получится.

        
          
          .price-table td {  font-feature-settings: "tnum";}
          .price-table td {
  font-feature-settings: "tnum";
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

        
          
          .article-body {  font-feature-settings: "smcp", "onum";}
          .article-body {
  font-feature-settings: "smcp", "onum";
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать