导入字体的固定字符宽度[重复]答案

【问题标题】：fixed character width for an imported font [duplicate]导入字体的固定字符宽度[重复]
【发布时间】：2018-04-19 15:13:37
【问题描述】：

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

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

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

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

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

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

【问题讨论】：

这是对您的原始小提琴的更新，可能会对您有所帮助：jsfiddle.net/teddyrised/qc863hc4/26

标签： javascript css string counter letter-spacing

【解决方案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/

【讨论】：