фиксированная ширина символа для импортированного шрифта

Работаем над приложением, требующим подсчета, и выбрали шрифт Orbitron из-за его квадратного вида.

Проблема в том, что, в отличие от шрифта по умолчанию в Chrome, ширина цифры этого шрифта не фиксирована, а это означает, что символы счетчика будут перемещаться влево и вправо в зависимости от размера отображаемых цифр.

Вот проблема, показанная на скрипке: 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);
})

javascript string css counter letter-spacing
person Hallemon    schedule 19.04.2018    source источник
comment
Вот обновление исходной скрипки, которое может вам помочь: jsfiddle.net/teddyrised/qc863hc4/26   -  person Terry    schedule 19.04.2018

Ответы (1)


arrow_upward
1
arrow_downward

Как объясняется в других ответах, вы не можете сделать это с помощью чистого 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/

person Renzo Calla    schedule 19.04.2018