使用空格对齐文本的等宽字体使其看起来很奇怪

Question

我在我的页面中使用默认的 html 字体 - Liberation Serif—30 glyphs。然后我遇到了一个问题，即对齐两列文本的多个 space 无法正常工作。

我发现，space 的显示宽度与其他字符不同，因此相同数量的字符不会使用相同的宽度。所以，我开始使用 monospaced 字体。它解决了对齐问题。

现在对齐看起来不错，但字体不是按照企业标准常用的字体。

我怎样才能使用像 Liberation Serif 这样的字体并仍然使用 space 个字符进行对齐？

Answer 1

如果要对齐列中的文本，使用 <table> 怎么样？或者如果它不是表格数据，一些 CSS 和 float: left;.

Answer 2

要在 HTML 中使用单色 space 字体进行原始格式设置，您可以使用 <pre> ... </pre> 元素。事实上，这个标签会自动为你 select 一个 monospace 字体：

<!-- the following shows the HTML, and the output will have the same column 
     formatting as it appears between the 'pre' tags -->
<pre>
      9      328
  2,345      208
    xyz        4
</pre>

<pre> 代表“保留”。您还可以将其作为 css 样式应用于其他类型的 HTML 标签。在这种情况下，您需要明确指定要使用的 monospace（例如 Windows 上的“Consolas”）字体：

<div style='font-family:Consolas; white-space:pre;'>
      9        a
  2,345      quick
    xyz      f o x
</div>

确保您用来创建 HTML 文件的文本编辑器设置为插入 space 个字符。如果布局有任何 tab 字符，或者 tab 和 [= 的混合，则布局在浏览器中可能看起来不一样55=].

此外，由于 <pre> 标签内整个文本的列和行格式被准确保留，因此上面显示的示例将在第一行之前包括一个初始“换行符”，您可能不想要（与最后的换行符不同）。这是因为包含的文本实际上是在 开始标记的 > 字符之后 开始的。有几种方法可以解决这个问题，留作 reader.

的练习。

使用空格对齐文本的等宽字体使其看起来很奇怪

Monospaced font to align text using spaces makes it look odd

css

fonts

monospace