font-variant-numeric

当我们在做倒计时或者从0开始增加到某一个数值的动画效果时，由于不同数字的宽度不同，在动画执行期间会发生文字不停的左右摆动的现象。
以下图片中的数字使用的是Fira Sans字体，可以看出数字的宽度不同导致第二行可以多容纳下一个字符。

我们可以通过font-variant-numeric这个属性来解决这个问题。font-variant-numeric属性用来控制数字、分数和序号标记的替代字形的展示形式。这个属性有很多取值，具体的可以看看这里。其中的tabular-nums就可以使所有的数字都变成一样的宽度。但是有一点需要注意，这些特征受字体的影响，有些字体可能不支持。

除了tabular-nums取值之外，以下是使用Source Sans 3字体在font-variant-numeric其他几个不同取值下展示情况。