当我们在做倒计时或者从0开始增加到某一个数值的动画效果时,由于不同数字的宽度不同,在动画执行期间会发生文字不停的左右摆动的现象。
以下图片中的数字使用的是Fira Sans字体,可以看出数字的宽度不同导致第二行可以多容纳下一个字符。
我们可以通过font-variant-numeric这个属性来解决这个问题。font-variant-numeric属性用来控制数字、分数和序号标记的替代字形的展示形式。这个属性有很多取值,具体的可以看看这里。其中的tabular-nums就可以使所有的数字都变成一样的宽度。但是有一点需要注意,这些特征受字体的影响,有些字体可能不支持。
除了tabular-nums取值之外,以下是使用Source Sans 3字体在font-variant-numeric其他几个不同取值下展示情况。