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 定义的css时，它表现得很难看，格式不再整洁。

有什么建议吗？谢谢！

Answer 1

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

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

例如：

pre {font-family: Consolas,monospace}

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

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

最佳答案似乎是How to use css to change <pre> font size：

从答案:(参考文字里面 pre）

...你总是可以将该文本包装在另一个元素中（一个范围，用于例如）并更改该元素的字体大小。

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

Answer 5

不要为pre标签添加字体系列定义删除它，一切都会没事的或者，如果必须使用该定义，则不要使用选项卡插入空格仅使用空格键来插入空格。很多工作，但这是要走的路希望这有帮助

<pre> tag and css font-family</pre>

5 个答案: