导入字体的固定字符宽度

Question

正在开发一个需要计数的应用程序，并为其方形外观选择了字体 Orbitron。

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

这是 fiddle 中说明的问题：https://jsfiddle.net/qc863hc4/8/

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

有没有办法固定<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/

导入字体的固定字符宽度

fixed character width for an imported font

javascript

css

string

counter

letter-spacing