В статье мы подробно расскажем о том, как использовать font variant numeric.


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

Формат

font variant numeric

Класс попутного ветраСвойство CSS
normal-numsfont-variant-numeric: normal
ordinalfont-variant-numeric: ordinal
slashed-zerofont-variant-numeric: slashed-zero
lining-numsfont-variant-numeric: lining-nums
oldstyle-numsfont-variant-numeric: oldstyle-nums
proportional-numsfont-variant-numeric: proportional-nums
tabular-numsfont-variant-numeric: tabular-nums
diagonal-fractionsfont-variant-numeric: diagonal-fractions
stacked-fractionsfont-variant-numeric: stacked-fractions


Числовые классы варианта шрифта:

  • нормальные числа: Использование normal-nums удалит все эффекты класса font-variant-numeric.
  • порядковый номер: Это значение напрямую указывает на значения открытого типа, т.е. ordn. В этом термине используются специальные глифы для порядковых маркеров.
  • перечеркнутый ноль: этот класс с косой чертой использует ноль с косой чертой, что оказывается очень полезным при различении 0 и O.
  • подкладка-номера: Этот класс соответствует значениям открытого типа, т.е. lnum. Это ключевое слово активирует числа, лежащие на базовой линии.
  • номера в старом стиле: Этот класс соответствует значениям открытого типа, т.е. onum. Это ключевое слово активирует набор цифр, где некоторые числа имеют потомка.
  • пропорциональные числа: Этот класс активирует те нормы, где не все числа имеют одинаковый размер. Его значение открытого типа равно pnum.
  • табличные числа: Значение открытого типа этого класса равно tnum. Он активирует те наборы фигур, в которых набор цифр имеет одинаковый размер.
  • диагональные дроби: Значение открытого типа — frac. Это активирует те наборы цифр, в которых числитель и знаменатель уменьшены и разделены косой чертой.
  • сложенные дроби: Значение открытого типа — arac. Это активирует те наборы цифр, в которых числитель и знаменатель уменьшены, сложены и разделены горизонтальной линией.



Код

<ul class="container mx-auto divide-y divide-gray-400 divide-dotted">
  <li class="flex items-center justify-between px-4 py-2">
    <div>
      <div class="font-sans font-light text-4xl align-middle mb-2" style="font-family: 'Source Sans Pro'">42nd</div>
      <div class="text-xs font-mono font-light text-gray-500 mt-2"><span class="font-bold">font-variant-numeric: </span>: normal</div>
    </div>
    <div class="text-xs font-semibold font-mono whitespace-nowrap px-2 py-1 ml-5 rounded text-white bg-pink-500 rounded-2">normal-nums</div>
  </li>

  <li class="flex items-center justify-between px-4 py-2">
    <div>
      <div class="ordinal font-sans font-light text-4xl align-middle mb-2" style="font-family: 'Source Sans Pro'">42nd</div>
      <div class="text-xs font-mono text-gray-500 mt-2"><span class="font-bold">font-variant-numeric</span>: ordinal</div>
    </div>
    <div class="text-xs font-semibold font-mono whitespace-nowrap px-2 py-1 ml-5 rounded text-white bg-pink-500 rounded-2">ordinal</div>
  </li>

  <li class="flex items-center justify-between px-4 py-2">
    <div>
      <div class="slashed-zero font-sans font-light text-4xl align-middle mb-2" style="font-family: 'Source Sans Pro'">20,000</div>
      <div class="text-xs font-mono font-light text-gray-500 mt-2"><span class="font-bold">font-variant-numeric</span>: slashed-zero</div>
    </div>
    <div class="text-xs font-semibold font-mono whitespace-nowrap px-2 py-1 ml-5 rounded text-white bg-pink-500 rounded-2">slashed-zero</div>
  </li>

  <li class="flex items-center justify-between px-4 py-2">
    <div>
      <div class="slashed-zero font-sans font-light text-4xl align-middle mb-2" style="font-family: 'Source Sans Pro'">802,701</div>
      <div class="text-xs font-mono font-light text-gray-500 mt-2"><span class="font-bold">font-variant-numeric</span>: lining-nums</div>
    </div>
    <div class="text-xs font-semibold font-mono whitespace-nowrap px-2 py-1 ml-5 rounded text-white bg-green-500 rounded-2">lining-nums</div>
  </li>

  <li class="flex items-center justify-between px-4 py-2">
    <div>
      <div class="oldstyle-nums font-sans font-light text-4xl align-middle mb-2" style="font-family: 'Source Sans Pro'">299,792,458</div>
      <div class="text-xs font-mono font-light text-gray-500 mt-2"><span class="font-bold">font-variant-numeric</span>: oldstyle-nums</div>
    </div>
    <div class="text-xs font-semibold font-mono whitespace-nowrap px-2 py-1 ml-5 rounded text-white bg-green-500 rounded-2">oldstyle-nums</div>
  </li>

  <li class="flex items-center justify-between px-4 py-2">
    <div>
      <div class="proportional-nums font-sans font-light text-4xl align-middle" style="font-family: 'Source Sans Pro'">01-01-1885</div>
      <div class="proportional-nums font-sans font-light text-4xl align-middle mb-2" style="font-family: 'Source Sans Pro'">11-12-1955</div>
      <div class="text-xs font-mono font-light text-gray-500 mt-2"><span class="font-bold">font-variant-numeric</span>: proportional-nums</div>
    </div>
    <div class="text-xs font-semibold font-mono whitespace-nowrap px-2 py-1 ml-5 rounded text-white bg-blue-500 rounded-2">proportional-nums</div>
  </li>

  <li class="flex items-center justify-between px-4 py-2">
    <div>
      <div class="tabular-nums font-sans font-light text-4xl align-middle" style="font-family: 'Source Sans Pro'">01-01-1885</div>
      <div class="tabular-nums font-sans font-light text-4xl align-middle mb-2" style="font-family: 'Source Sans Pro'">11-12-1955</div>
      <div class="text-xs font-mono font-light text-gray-500 mt-2"><span class="font-bold">font-variant-numeric</span>: tabular-nums</div>
    </div>
    <div class="text-xs font-semibold font-mono whitespace-nowrap px-2 py-1 ml-5 rounded text-white bg-blue-500 rounded-2">tabular-nums</div>
  </li>


  <li class="flex items-center justify-between px-4 py-2">
    <div>
      <div class="diagonal-fractions font-sans font-light  text-4xl align-middle mb-2">1/2</div>
      <div class="text-xs font-mono font-light text-gray-500 mt-2"><span class="font-bold">font-variant-numeric</span>: diagonal-fractions</div>
    </div>
    <div class="text-xs font-semibold font-mono whitespace-nowrap px-2 py-1 ml-5 rounded text-white bg-yellow-400 rounded-2">diagonal-fractions</div>
  </li>

  <li class="flex items-center justify-between px-4 py-2">
    <div>
      <div class="stacked-fractions font-mono font-light  text-4xl align-middle mb-2" style="font-family: 'Ubuntu Mono'">1/2</div>
      <div class="text-xs font-mono font-light text-gray-500 mt-2"><span class="font-bold">font-variant-numeric</span>: stacked-fractions</div>
    </div>
    <div class="text-xs font-semibold font-mono whitespace-nowrap px-2 py-1 ml-5 rounded text-white bg-yellow-400 rounded-2">stacked-fractions</div>
  </li>

</ul>
Войти в полноэкранный режим

Выйти из полноэкранного режима

Полный код:
Общий код будет прикреплен к репо ссылка на сайт.

Общий вывод
Описание изображенияОписание изображения

Ресурсы:
попутный ветер.css

Спасибо, что читаете :). Чтобы узнать больше, загляните в мои блоги о Flex Direction, Hackathons и Flex Wrap.
Если вам понравилась эта статья, рассмотрите возможность подписаться на меня на Dev.to для моих последних публикаций. Вы можете связаться со мной по Твиттер.

Продолжай учиться! Продолжайте кодировать!! 💛