用CSS一行代码整齐显示和对齐数字

作为前端开发者，你可能至少有一次这样的对话经历：

💬 设计师： "为什么这些表格数字这么参差不齐？每列宽度都不一样。"
开发者： "因为字体的原因，每个数字的宽度都不同..."
设计师： "那我们必须使用等宽字体吗？"

读完这篇文章后，你就能这样回答：

"不，只需一行font-variant-numeric代码就能解决。"

font-variant-numeric属性

font-variant-numeric是一个控制数字显示方式的CSS属性，它允许你应用特定的数字相关样式。主要用于排版中精细调整数字的形状、间距和对齐等。

宽度控制 (numeric-spacing-values)

tabular-nums：使可变宽度字体中的数字宽度统一。
css
```
font-variant-numeric: tabular-nums;
```
before
0123456789
1231231231
after
0123456789
1231231231
proportional-nums：相反，使等宽字体中的数字变为比例宽度。
css
```
font-variant-numeric: proportional-nums;
```
before
0123456789
1231231231
after
0123456789
1231231231

样式控制 (numeric-figure-values)

lining-nums：将所有数字对齐到基线，保持统一高度。
css
```
font-variant-numeric: lining-nums;
```
before
0123456789
after
0123456789
oldstyle-nums：将某些数字(3, 4, 5, 7, 9)像小写字母一样下沉显示。
css
```
font-variant-numeric: oldstyle-nums;
```
before
0123456789
after
0123456789

分数控制 (numeric-fraction-values)

diagonal-fractions：自动将普通分数表示(1/2, 3/4)转换为对角线分数(½, ¾)。
css
```
font-variant-numeric: diagonal-fractions;
```
before
面粉 1/2杯
糖 3/4杯
after
面粉 1/2杯
糖 3/4杯
stacked-fractions：将分数以上下堆叠的形式显示。
css
```
font-variant-numeric: stacked-fractions;
```
before
1/2
糖 3/4
after
1/2
糖 3/4

其他实用功能

slashed-zero：在数字0中添加斜线，以明确区分字母O。
css
```
font-variant-numeric: slashed-zero;
```
before
ID: U00123O0
after
ID: U00123O0
ordinal：将1st, 2nd, 3rd等文本以序数形式显示。
css
```
font-variant-numeric: ordinal;
```
before
1st, 2nd, 3rd
after
1st, 2nd, 3rd

注意事项

并非所有字体都支持上述CSS属性。你使用的字体必须支持相应的OpenType功能才能显示效果。由于font-variant-numeric属性利用了OpenType字体的高级功能，网页字体或系统字体必须内置这些功能才能正常工作。例如，较旧的字体或基本的网页字体可能不支持diagonal-fractions或oldstyle-nums等功能。

总结

现在，当设计师问"为什么表格中的数字对齐这么混乱？"时，不要慌张。一行font-variant-numeric代码就足够了。虽然只是一行小小的CSS代码，但用户感知到的完成度差异却很大。在下一个包含数字的UI项目中，记得使用font-variant-numeric。它肯定能帮助你创造更好的用户体验。

参考