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

Question

是否有字体或CSS属性可以为每个字符提供相同的宽度而无需自己绘制（.ttf）？

Answer 1

CSS：

font-family: monospace;

HTML：

<tt>

Answer 2

Courier New怎么样？等宽？

http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html

Answer 3

您可以从任意freely available fixed width fonts中进行选择，并将其嵌入您的网站。

如果您不想在页面中嵌入字体，可以使用以下内容来获取任何等宽字体（固定宽度的另一个术语）字体：

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

Answer 4

对于某些情况，使用 pre 标记（<pre>text</pre>）可能会满足您对等宽（固定宽度）文本的需求。它适用于 HTML5 + Chrome （当前版本）。不推荐使用tt元素。

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

Answer 5

如果只需要数字等于宽度，则可以使用font-variant-numeric: tabular-nums;。这对于为计数器设置动画非常有用。在Mozilla web docs上详细了解它。

Answer 6

有许多等宽字体给每个字符提供相同的宽度。 Courier and Courier New可能是最常见的，几乎可以在每个系统上使用。

Answer 7

另一种选择是使用lettering.js，这将在每个字母周围创建一个span元素，然后您可以使用css将宽度设置为。不过，这可能仅适用于小型文本。