font-variant-numeric

Свойство font-variant-numeric позволяет управлять начертаниями цифр и связанных с ними символов. С его помощью можно настроить:

• ширину цифр — одинаковую или разную;
• стиль цифр — старостильные «текстовые» или выровненные «табличные»;
• отображение дробей, нулей и порядковых индикаторов (1st, 2nd, 3rd).

        
          
          .selector {  font-variant-numeric: lining-nums tabular-nums;}
          .selector {
  font-variant-numeric: lining-nums tabular-nums;
}

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

Свойство font-variant-numeric принимает одно или несколько значений из списка ниже:

• normal — отключает альтернативное начертание (значение по умолчанию);
• ordinal — добавляет дополнительные глифы для порядковых числительных (например, делает 1st, 2nd, 3rd с маленькими «st», «nd», «rd»);
• slashed-zero — ноль будет с чертой внутри. Полезно, если нет видимой разницы между нулём и буквой «О»;
• lining-nums — каждая цифра лежит на базовой линии текста;
• oldstyle-nums — набор строчных цифр, в котором 3, 4, 7, 9 свешиваются с базовой линии;
• proportional-nums — допустима разная ширина цифр (1 узкая, 0 широкая);
• tabular-nums — одинаковая ширина каждой цифры;
• diagonal-fractions — числитель и знаменатель в дроби уменьшены и разделены косой чертой;
• stacked-fractions — числитель и знаменатель в дроби уменьшены и разделены горизонтальной линией.

Вот как выглядят все значения на примере:

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

• финансы, таймеры, таблицы: tabular-nums выравнивает цифры по ширине;
• текстовые статьи: oldstyle-nums смотрятся естественнее в потоке текста рядом с буквами;
• рецепты и формулы: diagonal-fractions и stacked-fractions помогают аккуратно оформить дроби.

💡 font-variant-numeric работает только со шрифтами, в которых заложены OpenType фичи. Если шрифт их не поддерживает, свойство не сработает.