Html 使网页上的每个字符宽度相同

是否有一种字体或CSS属性可以使每个字符具有相同的宽度，而无需自己绘制（.ttf）？

您可以从任何字体或CSS属性中进行选择，并将其嵌入到您的站点中

如果您不想在页面中嵌入字体，您可以使用以下方法获取可用的monospace（固定宽度的另一术语）字体：

font-family: "Courier New", Courier, monospace;

---

新的怎么样？单空间

CSS:

font-family: monospace;

HTML:

有许多单间距字体，使每个字符的宽度相等。可能是最常见的，并且应该在几乎所有系统上都可用。

另一个选项是使用，它将在每个字母周围创建一个span元素，然后您可以使用css设置宽度。不过，这可能只适用于小文本。

在某些情况下，使用pre标记（

text

）可以满足您对单间距（固定宽度）文本的需求。我用HTML5+Chrome（当前版本）就可以使用它。

tt

元素已弃用

---

但是，

标记似乎只能包含被视为“语法内容”的标记。请参阅上的“内容模型”部分。您可以单击链接查看哪些元素被视为“语法内容”。当然，如果您不关心有效的HTML或跨浏览器兼容性，每个浏览器都可能支持更宽松的规范版本。

如果您只需要数字的宽度相等，您可以使用

字体变量numeric:tabular nums。它对于设置计数器的动画非常有用。阅读更多关于它的内容。
但是，每个字符的宽度都相同吗？例如，“M”和“，”都是5px。是的，这就是单间隔的意思。这也是为什么单间距字体通常很不吸引人的原因。@Jay-是的。这就是固定宽度字体的全部要点。每个字符占用相同的空间，因此所有内容都排列整齐。@MichaelMullany
Consolas
并没有那么糟糕。正如@MichaelMullany所说，单间距字体通常也很不吸引人，“console”的外观和感觉。。。您知道更友好的单间距字体吗？它不适用于以下两个字符：▼, ▶. 至少Chrome、IE和Firefox会给它们不同的宽度。你能添加一些描述吗？仅供参考，在HTML5tt标签中tt标签是不推荐的tt标签是HTML，在github的混合HTML/Markdown中得到适当的尊重。。。很高兴知道，对于任何感兴趣的人来说。事实上，就今天（2018年1月）而言，当使用
标签时，monospace没有正确地应用于Chrome和Opera的Android版本。在Safari for iPhone 4S上，它似乎工作正常。我来这里是为了记住鲜为人知的CSS属性，但很失望这不是公认的答案，而这显然是最好的；）与前面的评论相同。这个答案需要提高@HusseinDuvigneau IENice不支持此解决方案！！非常感谢。我在一个表中呈现编号按钮，但不明白为什么“1”按钮比其他按钮窄：）这太完美了！
<tt>