<pre>标签和CSS字体族</pre>

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 后，它表现得很丑陋，格式不再整齐。

有什么建议吗？谢谢！

- Dong

---

作为离题的建议，我建议您使用表格而不是尝试排列文本。 - Sam Dufel

Answer 1

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

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

例如：

pre {font-family: Consolas,monospace}

如果Consolas等宽字体可用，则使用该字体，否则回退到默认字体。

- Alex Jasmin

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

- Dong

Answer 3

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

font-family: monospace;

可能您的定义暗示了一种不同类型的字体，这就是为什么您漂亮的设计会出现错误。您必须指定一个特定于系统的等宽字体（例如“Lucida Console”）或后备别名“monospace”。

- user151323

---

根据以下内容，您应该实际执行此操作 font-family: monospace,monospace;。http://code.stephenmorley.org/html-and-css/fixing-browsers-broken-monospace-font-handling/ - Joe

Answer 4

最佳答案似乎是如何使用CSS更改

字体大小 :


从那个答案中得知：（参考pre内的文本）


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


 （不要忘记在那里点赞他的答案。）

- ispiro

Answer 5

不要为pre标签添加字体系列定义， 删除它，一切就会好起来。 或者如果你必须使用这个定义，那就不要使用制表符插入空格， 只能使用空格键来插入空格...虽然有些麻烦，但那是正确的做法。 希望这可以帮到你。

- Bobby