Как убрать дерганье цифр при работе таймера обратного отсчета?

Question

[Max Rudik]

Всем привет!
Цифры размером 100 пикселей, шрифт нестандартный, цифры видимо немного разные в ширину. При выводе в таймере цифры заметно дергаются, смотреть неприятно.
В стилях все стандартно.

.myScreen h1{
	font-family: KelsonSans-LightRu;
	line-height: 230px;
	font-size: 100px;
	color: #434343;
}

div - position: fixed;

Как это можно поправить?

Answer 1

[Ivanq]

Как вариант, засунуть каждую цифру в span и для span поставить display: inline-block; width: ...px. (подставьте сами)

Answer 2

[Рост Осипов]

Попробуйте использовать стандартный sans-serif (Helvetica / Arial) вместо KelsonSans. Проблема исчезнет.

Answer 3

[vkponomarev]

Я сделал так:

<div class="timer-time">
        <div class="timer-time-stopwatch">
            <p id="clock">00:00:00</p>
        </div>
</div>

.timer-time{
width : 100%;
text-align : center;
}

Прижал к левому краю секундомер:

.timer-time-stopwatch{
text-align : left;
}

и для каждого медиа подобрал нужную ширину блока

@media (min-width: 1200px) {
  .timer-time-stopwatch{
    width: 890px;
  }
}

и т.д.