Javascript（或css？）：不断改变数字摆动周围的文字

Question

我已经实现了这样的事情：

http://jsfiddle.net/DKs49/

<p>Here are some numbers: <span id="1">123234</span>. Cool huh?<p>

然后动态更改数字：

setInterval(function () {document.getElementById('1').innerHTML = Math.random();},100);

但是，我没有使用固定宽度的字体（正如jsfiddle所做的那样）

当添加数字时，我需要移动周围的文本（就像它在做...）但是，在我的网站上，当数字位数相同时，周围的文本仍然会根据数字宽度摆动（因为不使用固定宽度的字体，1比2）窄。

有人知道如何解决这个问题吗？ （或者可以推荐一种看起来不像打字机的跨平台固定宽度字体......）

<小时/> 编辑：根据@guffa的评论，许多字体都有固定的宽度数字。而不是麻烦这个，最简单的路线=选择更好的字体。

Answer 1

如果您使用固定宽度<span>：

p span {
    display: inline-block;
    width: 150px;
    text-align: right;
}

http://jsfiddle.net/DKs49/4/

Answer 2

由于数字宽度不同，文字没有跳转，因为数字位数不同，所以它会四处跳跃。

如果您获得一个像0.7362924825642400这样的随机数，它将显示为0.73629248256424，即比其他数字短两位数。小数点分隔符后面的零数字将使用相同的有效位数显示，因此它将比其他数字更长。

在大多数字体中，数字仍然是相同的宽度，尽管其余字符不是。它们是这样制作的，这样当数字以列显示时，数字将排成一行，而不必分别对齐每个数字。

如果您始终使位数相同，您很可能会像我一样看到文本的其余部分完全静止：http://jsfiddle.net/Guffa/DKs49/8/

document.getElementById('1').innerHTML = String(Math.random()).substr(0,15);

Answer 3

根据W3 specification：

'monospace'固定宽度字体

• Andale Mono
• Courier New
• 信使
• Lucidatypewriter
• 固定
• 等宽