html - 如何使每个字符的宽度相同？

Question

我正在使用自定义字体。设计不允许我更改字体。

在数字变化的同时，由于数字宽度的不同，它之后的内容被推送。

有没有办法让所有的数字都一样宽？我不想分配span组件的宽度，因为我需要它是内联的，宽度应该由它的位数决定。

const numberDom = document.querySelector('.number');
let number = 0;

function tick() {
  number += 1;
  numberDom.innerText = number;
}

setInterval(tick, 50);

p {
  font-size: 1rem;
}

.number {
  font-family: 'Carter One', cursive;
  font-size: 1.5rem;
  color: #365;
}

.number::after {
  content: 'pt';
  font-size: 0.75em;
  margin-left: 0.1em;
  color: #587;
}

<link href="https://fonts.googleapis.com/css?family=Carter+One&display=swap" rel="stylesheet">

<p>You got <span class="number"></span>, good job!</p>

标签： htmlcssfonts

Answer 1

好的，首先我做了一个函数来改变你的<p>. 在那之后，我能找到停止抖动的唯一解决方案是将数字放入inline-block.

这是我的小提琴

编辑

我做了一个脚本来改变width. inline-block这是一个 if 语句，如果您的号码为 1000 或更高，width则将更改。

小提琴

你总是可以else if用超过 10000 个等等来制作一个。