3

I was using the default html font - Liberation Serif—30 glyphs in my page. Then i faced a problem, that multiple spaces to align two columns of text is not working properly.

I found out, spaces are not displayed at the same width as other characters and hence the same number of characters doesn't use same width. so, i started using monospaced font. It solves the alignment problem.

The alignment looks good now but the font is not the commonly used one as per the corporate standards.

How can i use a font like Liberation Serif and still do alignment using space characters?

4

2 回答 2

1

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

于 2015-05-15T01:52:35.297 回答
0

要在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 文件的文本编辑器设置为插入space字符。如果布局有任何tab字符，或混合使用tab和，浏览器中的布局可能看起来不一样space。

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

于 2020-07-01T00:51:42.360 回答