The font-variant-numeric CSS property controls the display of numbers using alternate forms supported by the font. 1. It enables stylistic variations such as old-style or lining numerals, proportional or tabular spacing, fractions, ordinals, and slashed zeros. 2. Values like oldstyle-nums, lining-nums, tabular-nums, and diagonal-fractions allow precise typographic control. 3. These values can be combined in a single declaration for enhanced design. 4. Not all fonts support every variant, so testing with tools like Axis-Praxis or checking font descriptions on platforms like Google Fonts is essential. 5. Practical uses include aligning columns in financial tables with tabular-nums or improving readability in body text with oldstyle-nums. 6. Browser support and correct font feature activation via @font-face also impact functionality.

When you're working with numbers in CSS and want them to look a bit more refined—like how they appear in professionally designed books or financial reports—you might have come across font-variant-numeric. This property gives you control over how numbers are displayed, allowing for stylistic variations like old-style figures or tabular spacing.

Here's how it works and what options you have.

What font-variant-numeric actually does

At its core, font-variant-numeric tells the browser which alternate forms of numbers (and related characters like fractions or ordinal indicators) to use. It doesn’t change the font itself but rather switches between different number styles that the current font may support.

For example, some fonts offer:

• Lining numerals (all numbers sit on the baseline)
• Old-style numerals (some numbers dip below the baseline, like lowercase letters)
• Proportional or tabular spacing
• Fractions and slashed zeros

You can combine multiple values in one declaration, like this:

body {
  font-variant-numeric: oldstyle-nums diagonal-fractions;
}

Common values and when to use them

There are several values you can apply. Here’s a breakdown of the most useful ones:

• normal – Uses the default numeric style.
• oldstyle-nums – Enables old-style figures where some digits extend below the baseline (great for body text).
• lining-nums – Forces all digits to align on the baseline (good for headings or data displays).
• proportional-nums – Numbers take up varying widths (like regular letters), so "1" is narrower than "8".
• tabular-nums – All numbers have equal width, making columns of numbers line up neatly (perfect for tables or financial reports).
• diagonal-fractions – Shows fractions like 1/2 using slanted formatting instead of stacked superscript/subscript.
• ordinal – Makes superscripted ordinals like "1st", "2nd" display properly.
• slashed-zero – Displays a zero with a slash through it, often used in code or data contexts to distinguish from the letter O.

These can be mixed and matched depending on your design needs.

How to make sure it works

Not every font supports all these numeric variants. If you're not seeing the effect, it might be because:

• The current font doesn't include those specific number styles.
• The browser doesn't support rendering them correctly.
• The feature isn’t enabled in the font via @font-face settings if you're using a web font.

To check if a font supports these features, tools like Axis-Praxis or OpenType feature testers can help. Also, many modern variable fonts advertise their support clearly.

If you're using Google Fonts, pay attention to whether the font description mentions OpenType features or numeric styles.

Practical example: Making a table cleaner

Let’s say you're styling a financial table. You'd probably want numbers aligned vertically and consistent in width. That’s where tabular-nums comes in handy.

td {
  font-variant-numeric: tabular-nums;
}

This makes all the digits take up the same space, so columns line up without needing extra padding hacks.

Or, for a nice touch in a book-like layout, try:

p {
  font-variant-numeric: oldstyle-nums proportional-nums;
}

This combination softens the appearance of numbers inside paragraphs, blending them better with surrounding text.

It’s a small detail, but using font-variant-numeric can make a noticeable difference in typography. It’s not something you’ll need every day, but when you do, it’s a powerful tool. Just remember to test and ensure your font supports what you're trying to do.

The above is the detailed content of How does font-variant-numeric work for styling numbers?. For more information, please follow other related articles on the PHP Chinese website!