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

Question

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

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

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

我怎么能使用像解放衬线字体和仍然做对齐使用空格字符?

Answer 1

如果你想在列中对齐文本，如何使用<table> ?或者如果不是表格数据，一些CSS和float: left;。

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标记。在这种情况下，您需要显式地指定monospace(例如"Consolas")在Windows上)使用字体:

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

确保用于创建HTML文件的文本编辑器设置为插入空格字符。如果它有任何tab字符，或者是tab和空格的混合，则布局在浏览器中可能看起来不一样。此外，由于<pre>标记内的整个文本的列和行格式是完全保留的，因此上面所示的示例将包括初始的&;换行&;在第一行之前，这可能不是您想要的(与最后的换行不同)。这是因为包含的文本实际上在开始标记的>字符之后立即开始。有几种方法可以解决这个问题，这些方法留给读者作为练习。