Question

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

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

现在对齐看起来不错，但根据公司标准，字体不是常用字体。

我如何使用像Liberation Serif这样的字体并仍使用空格字符进行对齐？

Answer 1

如果您想在列中对齐文字，请使用.怎么样？或者，如果它不是表格数据，那么一些CSS和<table>。

Answer 2

要将等宽字体用于 HTML 中的原始格式，可以使用<pre> ... </pre>元素。实际上，此标签会自动为您选择等宽字体：

<!-- 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标签。在这种情况下，您需要明确指定要使用的等宽字体（例如Windows上的“ Consolas”）字体：

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

确保用于创建HTML文件的文本编辑器设置为插入空格字符。如果布局包含任何 tab 字符或 tab 和 space 的混合，则在浏览器中的布局可能看起来不一样。

此外，由于<pre>标记内的整个文本的列和行格式保留不变，因此上面显示的示例将包括一个首字母“换行符” 在第一行之前 ，您可能不希望这样做（与最后一个换行符不同）。这是因为所包含的文本实际上是在开始标签的>字符之后立即开始的。有几种解决方法，留给读者练习。

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

2 个答案: