Свойство CSS `font-feature-settings`

Свойство font-feature-settings CSS управляет расширенными типографическими функциями шрифтов OpenType.

Попробуйте

font-feature-settings: normal;

font-feature-settings: "liga" 0;

font-feature-settings: "tnum";

font-feature-settings: "smcp", "zero";

<section id="default-example">
  <div id="example-element">
    <p>Difficult waffles</p>
    <table>
      <tbody>
        <tr>
          <td><span class="tabular">0O</span></td>
        </tr>
        <tr>
          <td><span class="tabular">3.14</span></td>
        </tr>
        <tr>
          <td><span class="tabular">2.71</span></td>
        </tr>
      </tbody>
    </table>
  </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;
}

#example-element table {
  margin-left: auto;
  margin-right: auto;
}

.tabular {
  border: 1px solid;
}

Синтаксис

/* Use the default settings */
font-feature-settings: normal;

/* Set values for OpenType feature tags */
font-feature-settings: "smcp";
font-feature-settings: "smcp" on;
font-feature-settings: "swsh" 2;
font-feature-settings:
  "smcp",
  "swsh" 2;

/* Global values */
font-feature-settings: inherit;
font-feature-settings: initial;
font-feature-settings: revert;
font-feature-settings: revert-layer;
font-feature-settings: unset;

По возможности веб-разработчикам следует использовать вместо него сокращённое свойство font-variant или соответствующее полное свойство, например font-variant-ligatures, font-variant-caps, font-variant-east-asian, font-variant-alternates, font-variant-numeric или font-variant-position.

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

Значения

Это свойство задаётся либо ключевым словом normal, либо списком значений <feature-tag-value>, разделённых запятыми. При отображении текста список значений OpenType <feature-tag-value> передаётся механизму компоновки текста, чтобы включить или отключить функции шрифта.

normal

Указывает, что текст оформляется с использованием настроек шрифта по умолчанию. Это значение по умолчанию.

<feature-tag-value>

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

Имя тега

Имя тега всегда представляет собой <string> из четырёх символов ASCII. Если имя тега содержит больше или меньше символов либо символы вне диапазона кодовых точек U+20 – U+7E, дескриптор недействителен.

Необязательное значение

Необязательным значением может быть положительное целое число или ключевое слово on либо off. Ключевые слова on и off являются синонимами значений 1 и 0 соответственно. Если значение не задано, по умолчанию используется 1. Для небулевых функций OpenType (например, стилистических альтернатив) значение указывает на определённый глиф, который нужно выбрать; для булевых функций значение включает или отключает функцию.

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

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

font-feature-settings = 
  normal |
  <feature-tag-value>#

<feature-tag-value> = 
  <string> [ <integer> | on | off ]?

<integer> = 
  <number-token>

Примеры

Включение различных функций шрифта

/* use small-cap alternate glyphs */
.small-caps {
  font-feature-settings: "smcp" on;
}

/* convert both upper and lowercase to small caps (affects punctuation also) */
.all-small-caps {
  font-feature-settings: "c2sc", "smcp";
}

/* use zeros with a slash through them to differentiate from "O" */
.nice-zero {
  font-feature-settings: "zero";
}

/* enable historical forms */
.historical {
  font-feature-settings: "hist";
}

/* disable common ligatures, usually on by default */
.no-ligatures {
  font-feature-settings: "liga" 0;
}

/* enable tabular (monospaced) figures */
td.tabular {
  font-feature-settings: "tnum";
}

/* enable automatic fractions */
.fractions {
  font-feature-settings: "frac";
}

/* use the second available swash character */
.swash {
  font-feature-settings: "swsh" 2;
}

/* enable stylistic set 7 */
.fancy-style {
  font-family: "Gabriola", cursive;
  font-feature-settings: "ss07";
}

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

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

См. также

• font-display
• font-family
• font-stretch
• font-style
• font-weight
• font-variation-settings
• src
• unicode-range
• Список тегов функций OpenType
• Функции OpenType в CSS