<pre> tag和css font-family

Question

我有以下代码的HTML：

<pre>
                                      |       Date Offense |       Count |
   Title, Section & Nature of Offense |          Concluded |   Number(s) |
--------------------------------------------------------------------------
              18:2113(a)-BANK ROBBERY |   January 27, 2009 |           I |
--------------------------------------------------------------------------

</pre>

它在一个简单的页面中工作得很完美，但是当我添加了带有font-family defination的css时，它表现得很难看，格式不再整齐。

有什么建议？ 谢谢！

Answer 1

您必须使用等宽字体（也称为打字机字体）。 这是一种所有字符占用相同空间的字体。

在CSS中，字体名称monospace被转换为用户系统上的默认等宽字体。 最好在<pre>元素的font-familly列表的末尾包含monospace ，以便它可以用作后备。

例如：

pre {font-family: Consolas,monospace}

将使用Consolas monospace字体（如果可用）或回退到默认值。

Answer 2

奇怪！ 当我发布这个问题时，Stackoverflow的显示就是我想要的。

所以解决方案是：

pre
{
  font-family: Consolas, Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace, serif;
  margin-bottom: 10px;
  overflow: auto;
  width: auto;
  padding: 5px;
  background-color: #eee;
  width: 650px!ie7;
  padding-bottom: 20px!ie7;
  max-height: 600px;
}

Answer 3

pre标签的默认定义使用等宽字体（如在控制台中）。

font-family: monospace;

你的定义可能会提出一种不同类型的字体，这就是为什么你的设计好了。 您必须指定系统特定的等宽字体（例如'Lucida Console'）或后备别名'monospace';

Answer 4

最好的答案似乎是如何使用css来改变<pre>字体大小 ：

从这个问题的答案：（指内的文本pre ）

...您始终可以将该文本包装在另一个元素（例如span）中，并更改该元素的字体大小。

（不要忘记在那里提出他的答案。）

Answer 5

不要为pre标签添加字体系列定义删除它并且每件事都没有问题或者如果你必须使用定义那么就不要使用tab来插入空格只使用空格键来插入空格..很多工作但是那就是希望这会有所帮助