Page 153 - css揭秘

pre, code {
font-family: monospace;
}

pre {
display: block;
margin: 1em 0;
white-space: pre;
}

这远不足以解决代码展示所独有的种种挑战。这其中最大的一个问题
①
在于，即使 tab 非常适合用来缩进代码 ，但人们在网页中却常常有意避开
tab。这是因为浏览器会把其宽度显示为 8 个字符！看看图 5-12 就可以发
现这么宽的缩进是多么难看、多么浪费：这段代码甚至已经装不进这个容
1
器了！

解决方案

图 5-12 谢天谢地，在 CSS 文本（第三版）中，一个新的 CSS 属性 tab-size
代码是以 tab 的默认宽度（8 个 可以控制这个情况。这个属性接受一个数字（表示字符数）或者一个长度值
字符）来显示的
（这个不那么实用）。我们通常希望把它设置为 4（表示 4 个字符的宽度）或
2，后者是最近更为流行的缩进尺寸。

pre {
tab-size: 2;
}

可以在图 5-13 中看到结果，它看起来要易读得多。你甚至可以把 tab-
size 设置为 0 来完全禁用 tab，但这通常不是什么好主意，因为它的效果会
变成如图 5-14 所示。即使浏览器不支持这个属性，一切也依然安好——我
图 5-13 们得到的 tab 宽度只不过是夸张的默认样式而已，而这副样子我们早已忍受
代码还是图 5-12 中的那段代码， 多年了。
但 tab 的宽度被显示为 2 个字符
的宽度
试一试 play.csssecrets.io/tab-size

„ CSS 文本 相关规范
http://w3.org/TR/css-text

图 5-14
代码中的 tab 宽度被设置为 0，
这导致所有基于 tab 的缩进效果
都消失了——千万别这么做 ① 你是不是一看到缩进代码就心生怯意？这个话题确实超出了本书的范畴，但你可以在这篇文
章（http://lea.verou.me/2012/01/why-tabs-are-clearly-superior）里找到我的思考过程。

122 第 5 章 字体排印

඀ࠡ JOEC