保持字符之间的空间不变Javascript

Question

我想要做的是保持我的计时器中的数字。

目前，有些角色比其他角色略大，所以当我的计时器快速计数时，它们会快速移动，使其难以阅读。

  

示例

     

＆＃34; 0＆＃34;可能是5px宽的   ＆＃34;＆＃34;可能是1px宽的   ＆＃34; 7＆＃34;可能是6px宽   因此，＆＃34; 0.7＆＃34;将是12px宽。

     

但是如果＆＃34; 6＆＃34;是5px宽，这意味着＆＃34; 0.6＆＃34;是11px宽，这是我认为在计时器迅速增加时引起运动的原因。

我找到了一个我想让我的角色做什么的例子here。正如您所看到的那样，计时器保持静止，并且数字会增加而不会推动其他字符。

我正在写一个类似的网站，但使用画布来包住计时器。我尝试过使用间距，但这并不起作用。我正在使用Javascript，它链接到HTML页面。

任何信息都将不胜感激。

Answer 1

如果你真的需要使用具有不同宽度字母的特定字体，你可以写一些均匀分隔字符的东西。但是，更简单的方法是使用monospaced font，例如Courier。

执行所需操作的CSS规则可能如下所示：

.timer
{
    font-family: "Courier New", Courier, monospace;
}

如果用户的计算机上存在完全匹配，则会告诉浏览器使用Courier New。如果他们没有，它将使用他们拥有的任何其他Courier字体。如果做不到这一点，它将使用他们拥有的任何等宽字体。

Answer 2

最快捷的方法是使用等宽字体。 Here是一些受欢迎的。

如果您不想使用等宽字体，可以将每个字符包裹在<span>中，并使跨度具有相同的宽度。

＆＃13;

＆＃13;

.clock span{
  display: inline-block;
  width: 10px;
}

＆＃13;

<div class="clock">
  <span>1</span>
  <span>1</span>
  <span>:</span>
  <span>1</span>
  <span>1</span>
</div>

<div class="clock">
  <span>2</span>
  <span>8</span>
  <span>:</span>
  <span>5</span>
  <span>8</span>
</div>

＆＃13;

＆＃13;

＆＃13;