数字变化抖动问题

起因

在实现一个显示能剩余输入字数的功能的时候发现随着文字的输入过程中，显示的可输入字数在一直抖动。看起来是因为不同的数字的宽度不同导致的，效果如下可以试着输入内容发现右侧会一直抖动

解决

开始是想着既然是因为不同数字宽度不一致导致那么直接用等宽字体不就好了。效果如下确实好使，但是有个问题字体一样了感觉整体不协调

使用新出的 css 属性font-variant-numeric的 tabular-nums 解决，它可以在不改变字体的情况下让数字等宽。效果如下。tabular-nums 表示让数字等宽，font-variant-numeric 还有许多选项可以在 MDN 查看。