在计时展示的时候，经常会遇到这样的问题：因为不同数字实际的“宽度”是不同的，因此在数字跳动的时候，整体的宽度会时常变化，无法对齐。
一个常见的方案，是将数字的字体设置成等宽字体（monospace）：
.digits {
font-family: monospace;
}但是这样的方案会导致数字部分的字体和其他地方的字体出现出入，视觉上可能出现不统一的情况。
CSS 提供了一些属性来微调字体展示，从而让数字展示的时候不出现宽度变化：
- 第一个方案是使用
font-variant-numeric属性，并设置值为tabular-nums。根据 MDN 介绍，tabular-nums会将字体设置成“等宽”的样子（占用的空间是等宽的，但是每个字本身并不一定是等宽的）。对应到 OpenType 中就是tnum，相关的介绍可以参考这里； - 第二个方案是使用
font-feature-settings属性，并设置值为tnum。根据 MDN 介绍，这是一个更底层的属性。效果其实和font-variant-numeric是一样的，且因为本身底层，并不建议直接使用。
需要注意的一点是，这一属性仅针对数字生效，对于小数点或是英文数字，并不生效。下面是一些实际的效果：
- 3.14 <= 正常数字的展示效果
- 3.14 <=
tabular-nums展示效果 - 2.72 <= 同上，数字部分可以保持对齐
- 1234 <= 对小数点无效，并没有对齐
- wave <= 对英文字母无效，并没有对齐