Свойство CSS `font-variant-numeric`

Свойство font-variant-numeric CSS управляет использованием альтернативных глифов для чисел, дробей и порядковых числительных.

Попробуйте

font-variant-numeric: normal;

font-variant-numeric: ordinal;

font-variant-numeric: slashed-zero;

font-variant-numeric: tabular-nums;

font-variant-numeric: oldstyle-nums;

font-variant-numeric: lining-nums;

font-variant-numeric: proportional-nums;

font-variant-numeric: diagonal-fractions;

<section id="default-example">
  <div id="example-element">
    <table>
      <tbody>
        <tr>
          <td><span class="tabular">0</span></td>
        </tr>
        <tr>
          <td><span class="tabular">3.54</span></td>
        </tr>
        <tr>
          <td><span class="tabular">1.71</span></td>
        </tr>
        <tr>
          <td><span class="tabular">1st</span></td>
        </tr>
        <tr>
          <td><span class="tabular">3/4</span></td>
        </tr>
      </tbody>
    </table>
  </div>
</section>

@font-face {
  font-family: "Source Sans Pro";
  src:
    local("SourceSansPro-Regular"),
    url("/shared-assets/fonts/SourceSansPro-Regular.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
}

section {
  font-family: "Source Sans Pro", sans-serif;
  margin-top: 10px;
  font-size: 1.5em;
}

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

.tabular {
  border: 1px solid;
}

Синтаксис

font-variant-numeric: normal;
font-variant-numeric: ordinal;
font-variant-numeric: slashed-zero;
font-variant-numeric: lining-nums; /* <numeric-figure-values> */
font-variant-numeric: oldstyle-nums; /* <numeric-figure-values> */
font-variant-numeric: proportional-nums; /* <numeric-spacing-values> */
font-variant-numeric: tabular-nums; /* <numeric-spacing-values> */
font-variant-numeric: diagonal-fractions; /* <numeric-fraction-values> */
font-variant-numeric: stacked-fractions; /* <numeric-fraction-values> */
font-variant-numeric: oldstyle-nums stacked-fractions;

/* Global values */
font-variant-numeric: inherit;
font-variant-numeric: initial;
font-variant-numeric: revert;
font-variant-numeric: revert-layer;
font-variant-numeric: unset;

Значения

Это свойство задаётся либо как normal, либо как разделённый пробелами список следующих значений:

normal

Это ключевое слово отключает использование таких альтернативных глифов.

ordinal

Это ключевое слово включает использование специальных глифов для порядковых числительных, например 1st, 2nd, 3rd, 4th в английском языке или 1a в итальянском. Ему соответствуют значения OpenType ordn.

slashed-zero

Это ключевое слово включает использование цифры 0 с косой чертой; это полезно, когда нужно чётко различать O и 0. Ему соответствуют значения OpenType zero.

<numeric-figure-values>

Эти значения определяют начертание цифр. Возможны два значения:

• lining-nums включает набор цифр, в котором все цифры расположены на базовой линии. Ему соответствуют значения OpenType lnum.
• oldstyle-nums включает набор цифр, в котором у некоторых цифр, например 3, 4, 7 и 9, есть нижние выносные элементы. Ему соответствуют значения OpenType onum.

<numeric-spacing-values>

Эти значения определяют размер цифр. Возможны два значения:

• proportional-nums включает набор цифр, в котором цифры имеют разный размер. Ему соответствуют значения OpenType pnum.
• tabular-nums включает набор цифр, в котором все цифры имеют одинаковый размер, что упрощает их выравнивание, например в таблицах. Ему соответствуют значения OpenType tnum.

<numeric-fraction-values>

Эти значения определяют глифы для отображения дробей. Возможны два значения:

• diagonal-fractions включает набор цифр, в котором числитель и знаменатель уменьшены и разделены косой чертой. Ему соответствуют значения OpenType frac.
• stacked-fractions включает набор цифр, в котором числитель и знаменатель уменьшены, расположены друг над другом и разделены горизонтальной чертой. Ему соответствуют значения OpenType afrc.

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

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

font-variant-numeric = 
  normal |
  [ <numeric-figure-values> || <numeric-spacing-values> || <numeric-fraction-values> || ordinal || slashed-zero ]

<numeric-figure-values> = 
  [ lining-nums | oldstyle-nums ]

<numeric-spacing-values> = 
  [ proportional-nums | tabular-nums ]

<numeric-fraction-values> = 
  [ diagonal-fractions | stacked-fractions ]

Примеры

Настройка порядковых числовых форм

Нажмите «Воспроизвести» в блоках кода ниже, чтобы отредактировать пример в MDN Playground:

<p class="ordinal">1st, 2nd, 3rd, 4th, 5th</p>

@font-face {
  font-family: "Source Sans Pro";
  src: url("https://mdn.github.io/shared-assets/fonts/SourceSansPro-Regular.otf")
    format("opentype");
  font-weight: normal;
  font-style: normal;
}

.ordinal {
  font-family: "Source Sans Pro", sans-serif;
  font-size: 2rem;
  font-variant-numeric: ordinal;
}

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

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

См. также

• font-variant
• font-variant-alternates
• font-variant-caps
• font-variant-east-asian
• font-variant-emoji
• font-variant-ligatures
• font-variant-position