Html 使网页上的每个字符宽度相同
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4686754/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Making every character on a web page the same width
提问by Jay
Is there a font or CSS property that would give every character the same width without the need of drawing them yourself(.ttf)?
是否有字体或 CSS 属性可以为每个字符提供相同的宽度而无需自己绘制它们（.ttf）？
采纳答案by Brian Erickson
回答by Ned Batchelder
CSS:
CSS：
font-family: monospace;
HTML:
HTML：
<tt>
回答by tris timb
If you only need numbers to be equal widths, you can use font-variant-numeric: tabular-nums;. It's really useful for animating counters. Read more about it on Mozilla web docs.
如果您只需要数字的宽度相等，则可以使用font-variant-numeric: tabular-nums;. 它对于动画计数器非常有用。在Mozilla 网络文档上阅读更多相关信息。
回答by Justin Niessner
You could chose from any of the freely available fixed width fontsand embed them in your site.
您可以从任何免费提供的固定宽度字体中进行选择，并将它们嵌入您的网站。
If you don't want to embed a font in your page, you could use the following to take whatever monospace (another term for fixed width) font is available:
如果您不想在页面中嵌入字体，则可以使用以下内容来获取可用的任何等宽（固定宽度的另一个术语）字体：
font-family: "Courier New", Courier, monospace;
回答by Bryan
For certain cases, using the pretag,(<pre>text</pre>), might fill your needs for monospaced (fixed width) text. It worked for me with HTML5+ Chrome(current version). The ttelement is deprecated.
在某些情况下，使用pre标记 ( <pre>text</pre>) 可能会满足您对等宽（固定宽度）文本的需求。它适用于HTML5+ Chrome（当前版本）。该tt元素已弃用。
However it appears the <pre>tag can only contain tags which are considered "phrasing content". See "Content model" section on the w3 documentation for that tag. You can click the link to see what elements are considered "phrasing content". Of course, each browser may support a looser version of the spec if you don't care about valid HTML or cross browser compatibility.
但是，该<pre>标签似乎只能包含被视为“短语内容”的标签。请参阅该标签的w3 文档中的“内容模型”部分。您可以单击链接查看哪些元素被视为“措辞内容”。当然，如果您不关心有效的 HTML 或跨浏览器兼容性，每个浏览器都可能支持规范的宽松版本。
回答by Kaleb Brasee
There's a number of monospaced fonts that give equal width to each character. Courier and Courier Neware probably the most common, and should be available on pretty much every system.
有许多等宽字体为每个字符提供相等的宽度。 Courier 和 Courier New可能是最常见的，并且应该在几乎每个系统上都可用。
回答by spiral
Another option would be to use lettering.js, which would create a span element around each letter that you could then set a width to with css. This would probably only be advisable for small texts, though.
另一种选择是使用lettering.js，它会在每个字母周围创建一个 span 元素，然后您可以使用 css 设置宽度。不过，这可能只适用于小文本。
