Question

处理需要计算的应用，并为其方形外观选择了字体Orbitron。

问题在于，与chrome上的默认字体不同，此字体的数字宽度不固定，这意味着计数字符将根据数字的大小左右移动显示。

以下是小提琴中的问题：https://jsfiddle.net/qc863hc4/8/

到目前为止，我找到的唯一解决方案是将两个数字分成两个不同的div s，以便它们的位置独立计算，但似乎过于复杂。

有没有办法修正<p>字符的宽度？

HTML

<body>
    <link href="https://fonts.googleapis.com/css?family=Orbitron" rel="stylesheet">
  <div class="countainer">
    <p class="count">00</p>
  </div>
  <button>
  count++
  </button>
</body>

CSS

.countainer{
  width : 100px;
  height : 50px;
  border: 2px solid black;
  font-size: 40px;
  text-align : center;
  letter-spacing : 15px;
  text-indent : 10px;
  font-family : "orbitron";
}

.countainer p {
  margin : 0;
}

JS

var count=0
var button = document.querySelector("button");
var p = document.querySelector("p");
button.addEventListener("click",function(){
    count++;
  p.innerHTML = ("0" +count).slice(-2);
})

Answer 1

正如在其他答案中解释的那样，你不能用纯粹的css做到这一点，你想要在元素中设置每个数字，并不是很糟糕你可以像这样使用它

var count=0
var button = document.querySelector("button");
var p = document.querySelector("p");
button.addEventListener("click",function(){
    count++;
   var value = ("0" +count).slice(-2);
   var arr = value.split('');
   value = arr.map(function(element) {
    return '<span>'+element+'</span>';
   }).join('');
   p.innerHTML = value;
})

https://jsfiddle.net/RACCH/t8xg6dys/

导入字体的固定字符宽度

1 个答案: