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

ss2ws0br 于 2023-06-25 发布在其他

关注(0)|答案(3)|浏览(286)

我用的是自定义字体。设计不允许我改变字体。
当数字变化时，由于数字宽度的不同，后面的内容会被推来推去。
有没有办法让所有的数字都一样宽？我不想指定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>

css

来源：https://stackoverflow.com/questions/56354028/how-do-i-make-the-width-of-each-character-the-same

3条答案

按热度按时间

ruarlubt1#

将您的编号类别更改为：

.number {
    font-family: 'Carter One', cursive;
    font-size: 1.5rem;
    color: #365;
    width: 56px;
    display: inline-flex;
}

赞(0）回复(0）举报 2023-06-25

eit6fx6z2#

好的，首先我做了一个函数，它改变了你的<p>的外观。在那之后，我能找到的唯一解决方案是停止抖动是把数字放进一个inline-block。
这是我的fiddle

编辑

我做了一个脚本，它改变了inline-block的width。这是一个if语句，如果你的数字是1000或更高，width就会改变。
Fiddle
你总是可以做一个else if超过10000等等。

赞(0）回复(0）举报 2023-06-25

new9mtju3#

你可以用

.numbers{
 font-family: Tahoma;
}

它将修复数字跳跃/高度异常问题。使用任何等宽字体作为字体系列，你会解决这个问题。

赞(0）回复(0）举报 2023-06-25

我来回答

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

3条答案

相关问题

热门标签

最新问答