<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>

它完美的作品在一个简单的页面,但是当我加入的CSS与FONT-FAMILY认定中,它执行丑陋,格式不整洁了.

有什么建议？谢谢!

Answer 1

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

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

例如:

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';