Html <pre> 标签和 css font-family
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3995022/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
<pre> tag and css font-family
提问by Dong
I have html with code below:
我有以下代码的html：
<pre>
| Date Offense | Count |
Title, Section & Nature of Offense | Concluded | Number(s) |
--------------------------------------------------------------------------
18:2113(a)-BANK ROBBERY | January 27, 2009 | I |
--------------------------------------------------------------------------
</pre>
It works perfect in a simple page, but when I have added css with font-familydefination, it performs ugly, the format is not tidy any more.
它在一个简单的页面上工作得很好，但是当我添加了带有字体系列定义的css 时，它的表现很丑陋，格式不再整洁。
Any suggestions? Thanks!
有什么建议？谢谢！
回答by Alex Jasmin
You must use a monospace font (also known as typewriter font). That is a font in which all the characters take the same space.
您必须使用等宽字体（也称为打字机字体）。这是一种所有字符都占用相同空间的字体。
In CSS the font name monospaceis translated to the default monospace font on the user system. It's good practice to include monospaceat the end of a font-familly list for the <pre>element so that it can be used as a fallback.
在 CSS 中，字体名称monospace被转换为用户系统上的默认等宽字体。monospace在<pre>元素的字体系列列表的末尾包含一个很好的做法，以便它可以用作后备。
For instance:
例如：
pre {font-family: Consolas,monospace}
will use the Consolas monospace font if it's available or fallback to the default.
如果可用或回退到默认值，将使用 Consolas 等宽字体。
回答by Dong
Surprising! When I have posted this question, the display of Stackoverflow is just what I want.
奇怪！当我发布这个问题时，Stackoverflow 的显示正是我想要的。
So the solution is:
所以解决办法是：
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;
}
回答by Dong
The default definition for the pretag uses the monospace font (like in console).
pre标签的默认定义使用等宽字体（如在控制台中）。
font-family: monospace;
It is possible your definition suggests a different type of a font which is why your nice design breaks. You must either specify a system-specific monospace font (e.g. 'Lucida Console') or the fall-back alias 'monospace';
你的定义可能暗示了一种不同类型的字体，这就是为什么你的漂亮设计失败的原因。您必须指定系统特定的等宽字体（例如“Lucida Console”）或备用别名“等宽”；
回答by ispiro
The best answer seems to be How to use css to change <pre> font size:
最好的答案似乎是How to use css to change <pre> font size：
From that answer: (referring to the text insidethe pre)
从那个答案：（指的是里面的文字pre）
...you can always wrap that text in another element (a span, for example) and change the font size of that element.
...您始终可以将该文本包装在另一个元素（例如，跨度）中并更改该元素的字体大小。
(Don't forget to upvote his answer there.)
（不要忘记在那里对他的回答点赞。）
回答by Bobby
Do not add font family definition for pre tag Remove it and every thing will be fine Or if you have to use the definition then do not use the tab to insert spaces Use space bar only to insert spaces.. Lot of work but that is the way to go Hope this helps
不要为 pre 标记添加字体系列定义 删除它，一切都会好起来的 或者，如果您必须使用该定义，则不要使用制表符插入空格 仅使用空格键插入空格.. 很多工作，但这就是希望这有帮助
