Числовой вариант шрифта

Применение

Используйте утилиты font-variant-numeric, чтобы включить дополнительные глифы для чисел, дробей и порядковых маркеров (в шрифтах, которые их поддерживают).

Эти утилиты можно компоновать, поэтому вы можете включить несколько функций font-variant-numeric, объединив несколько классов в Вашем HTML:

<p class="ordinal slashed-zero tabular-nums ...">1234567890</p>

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

Порядковый

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

Разрезанный ноль

Используйте утилиту slashed-zero, чтобы установить 0 с косой чертой; это полезно, когда необходимо четкое различие между O и 0.

Облицовочные цифры

Используйте утилиту lining-nums, чтобы использовать числовые глифы, которые выровнены по своей базовой линии. Это соответствует функции OpenType lnum. Это значение по умолчанию для большинства шрифтов.

Олдстайл цифры

Используйте утилиту oldstyle-nums для использования числовых глифов там, где у некоторых чисел есть нижние элементы. Это соответствует функции OpenType onum.

Пропорциональные цифры

Используйте утилиту proportional-nums, чтобы использовать числовые глифы с пропорциональной шириной (а не равномерные/табличные). Это соответствует функции OpenType pnum.

Табличные цифры

Используйте утилиту tabular-nums для использования числовых глифов, которые имеют одинаковую/табличную ширину (а не пропорциональную). Это соответствует функции OpenType tnum.

Диагональные дроби

Используйте утилиту diagonal-fractions, чтобы заменить числа, разделенные косой чертой, на обычные диагональные дроби. Это соответствует функции OpenType frac.

Дробные фракции

Используйте утилиту stacked-fractions для замены чисел, разделенных косой чертой, на обычные дробные части с накоплением. Это соответствует функции OpenType frac. Кажется, очень мало шрифтов поддерживают эту функцию - здесь мы использовали Ubuntu Mono.

Сброс вариантов числового шрифта

Используйте свойство normal-nums для сброса вариантов числового шрифта. Обычно это полезно для сброса функции шрифта в определенной контрольной точке:

<p class="slashed-zero tabular-nums md:normal-nums ...">12345</p>

Адаптивность

Чтобы управлять свойством font-variant-numeric элемента в определенной контрольной точке, добавьте префикс {screen}: к любой существующей утилите font-variant-numeric. Например, используйте md:tabular-nums для применения утилиты tabular-nums только при средних размерах экрана и выше.

<div class="proportional-nums md:tabular-nums">
  <!-- ... -->
</div>

Для получения дополнительной информации о функциях адаптивного дизайна Tailwind ознакомьтесь с документацией Адаптивного дизайна.

Кастомизация

Варианты

По умолчанию, только responsive варианты создаются для утилит font variant numeric.

Вы можете контролировать, какие варианты создаются для утилит font variant numeric для изменения свойства fontVariantNumeric в разделе variants Вашего файла конфигурации tailwind.config.js.

Например, эта конфигурация также будет генерировать варианты hover и focus:

  // tailwind.config.js
  module.exports = {
    variants: {
      extend: {
        // ...
+       fontVariantNumeric: ['hover', 'focus'],
      }
    }
  }

Отключение

Если Вы не планируете использовать в своем проекте утилиты для изменения font variant numeric, Вы можете полностью отключить их, установив для fontVariantNumeric свойство значение false в разделе corePlugins Вашего файла конфигурации:

  // tailwind.config.js
  module.exports = {
    corePlugins: {
      // ...
+     fontVariantNumeric: false,
    }
  }