使用 pre 标签样式的注意事项

　　你可能正在使用

 标签。这是一个 HTML 中非常特别的标签，它允许其中的空格真正显示出来。例如：四个空格将真实显示成四个空格。这不同于其他标签通常的做法，其他标签会将之间的空白压缩成一个。从这一点来说，<pre class="brush:php;toolbar:false">标签真的是很有用。</p>
<h3>
	　　你在 <pre class="brush:php;toolbar:false"> 标签中使用 <code> 标签吗？</h3>
<p>
	　　<pre class="brush:php;toolbar:false"> 标签的 “pre” 的意思是 “preformatted text”（预格式化的文本），没有特别规定里面的文本是什么内容。<code> 标签的语义表示其中的文本是代码。这对我来说尤其有用，当我需要显示一段代码时，使用它们，下面是一个例子：</p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><pre class="brush:php;toolbar:false"><code>
function cool(x) {
  return x + 1;
}
</code>

登录后复制

　　解释一下：在

<code>和代码之间有一个换行，而这也会被显示成一个空行，这非常讨厌。没有非常好的 CSS 方法来解决这个问题，最好的方法是与 <pre class="brush:php;toolbar:false"> 标签同一行开始代码，或者用编译程序来去除这里的换行。</p>
<p style="text-align: center">
	<img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/007/0d1d239a75cc159e4746f3c705f17de8-0.jpg" class="lazy" alt="Screen Shot 2016-05-21 at 9.02.25 AM.png"></p>
<h3>
	　　选择一个字体</h3>
<p>
	　　由于 <pre class="brush:php;toolbar:false"> 标签主要是用来显示代码块，而代码通常使用等宽字体，因此将 <pre class="brush:php;toolbar:false"> 的样式字体设置成等宽字体是个好主意。</p>
<p>
	　　对我们来说幸运地是，浏览器默认字体已经将 <pre class="brush:php;toolbar:false"> 设置成等宽字体，因此你可以不做任何处理。当然，你可以设置一个你喜欢的字体。</p>
<p>
	这　　里有篇文章是 Michael Tuck 写于 2009 年的，他研究了“font stacks”。font stack 是说将一组字体罗列在一个 font-family 标签中，首选字体列在前面，备选字体依次列在其后。他的等宽字体 font stack 较好地利用了跨平台系统预装字体。</p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">font-family: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", 
"Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", 
"Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace;

登录后复制