在这个系列的第一部分，我们讨论了一些与CSS排版的基础概念。现在我们将讨论一些出色的技术，建议，技巧以及处理网站排版的最佳实践。
这是CSS排版参考三篇系列中的第二部分，这三篇将涵盖从基本语法到最佳实践，以及CSS排版相关工具的内容。
对于普通文本块，使用巧妙的字体栈（如第一部分讨论的）是一个不错的主意，但是对于标题和短文本块，可以借助@font-face使用更多有趣的字体。使用得当，@font-face可以很大程度地与各种浏览器兼容，是的，甚至是IE。只需要在你的Web服务器上放一份字体文件并且在你的CSS代码中如下使用@font-face规则：
@font-face { font-family: CurlzMTRegular; src: url(fonts/CurlzMTRegular.eot); }
然后仅需要在CSS中使用font-family声明：
h1, h2, h3, h4, h5, h6 { /* Always use a font stack, even with custom web fonts! */ font-family: CurlzMTRegular, Helvetica, Arial, sans-serif; }
虽然IE4+支持@font-face，但是字体必须是.eot文件格式。很容易——只需要先对你选择的每个字体使用工具进行转换：ttf → eot Convertor。
想了解更多的@font-face的信息，请阅读以下文章：
想更简单地实现@font-face，使用Font Squirrel的@font-face生成器。
网页排版设计其实都是在关注易读性和可读性。
好的易读性和可读性的一个主要因素就是文字如何在网页中垂直地流动。文字是否太挤，或是太宽松？这是理解和切实实施垂直节奏起作用的地方。
垂直节奏是用户从上往下读页面时的文本间隔和排列。
垂直节奏主要是用font-size和line-height来处理，还有top/bottom margin和padding。
垂直节奏的概念很简单：行高，间距，填充都必须相同或有相同的比例。下面是一个例子：
p, ol, ul, blockquote, pre, code { line-height: 18px; margin-bottom 18px; /* 1.5em provides good vertical spacing ( = 150% of the font-size) */ line-height: 1.5em; margin-bottom: 1.5em; }
考虑顶边距和填充一个文本块（比如段落，列表，引用块），同时含有图像和其它块级元素。试着使用相同的line-height或使用它们的倍数（比如对于上面的例子来说使用18px,32px,64px等）。
相同比例很容易计算出来。让我们试着指出下面的例子中line-height应该是多少。
h1 { font-size: 2em; line-height: ?; }
如果body的line-height设为1.5em，那么我们只需要用我们的font-size除它来得到我们的比例：1.5em/2em = 0.75em
h1 { font-size: 2em; line-height: 0.75em;}
对于大于line-height的字号，line-height必须减小到匹配基线网格。我们可以使用相同的算法来确定较小字号的line-height。让我们再来试试，不过这次我们的font-size比body元素的line-height小。
h2 { font-size: .7em; line-height: ?;}
如果body的line-height还是1.5em，那么我们将用它除以我们的font-size：1.5em/.7em = 2.14em。
h2 { font-size: .7em; line-height: 2.14em;}
需要了解更多的在网页布局中创建基线或垂直节奏的信息，查看以下列出的文章。此外还有一个方便的工具“垂直节奏生成器”，如果你不想计算所有东西的话。
使用文本与空白CSS属性
@font-face和垂直节奏有时候可能会太困难，所以为我们放慢一点并回到一些更基础的技术。
CSS文本属性组包含一些处理文本样式的属性。很好的理解这些属性可以帮助你设计中的文本块达到更高的用户友好的程度。
这是一些文本CSS属性（它们的名字具有自明性）：
让我们用例子来看看这些属性是如何工作的。在下面这个例子中，我们将对所有段落做缩进：
p { text-indent: 3em; }
你可以通过使用direction属性来设置文字方向。默认方向是ltr，是从左到右的缩写。如果想反过来的话，我们可以把direction设置为rtl。
p { direction: rtl;}
direction属性不是很流行，因为它只用于专门的目的，但是它可以更好地处理其它书写语言。比如许多中东语言就是从右到左读的。
这些属性为字和词之间提供间距。
white-space属性控制文本如何在它的父元素内部环绕。取值可以是normal, nowrap, pre, pre-line, pre-wrap和inherit。
word-spacing属性影响词与词之间的间距。取值可以是任何CSS测量单位（如0.5em或5px）。
letter-spacing属性与word-spacing属性类似，只不过它是处理单个字符之间的间距。取值可以是任何CSS测量单位。
CSS3为我们提供了更多用于网页排版的属性。其中一个新加入到CSS的属性是text-shadow。这里是为段落加上漂亮文本阴影的样式规则：
p { text-shadow: 1px 1px 1px #000; }
要创建嵌入文本，你可以使用负值，如下：
h1 { /* Use negative offsets to create inset text. */ text-shadow: #000 -1px -1px 0; }
更多text-shadow的使用技巧参看教程如何使用CSS3创建嵌入版式。
接下来是我们已经提到过的最佳实践的一个回顾，以及补充一些额外的知识。CSS排版的核心理念是关注可读性以改善用户体验。
没有一个结论性的研究指明一组类型比另一组更易读。最影响易读性的是我们讨论的CSS属性，比如font-size和letter-spacing。
对于serif字体，更多地使用line-height，letter-spacing，甚至更多地使用word-spacing，因为serif字体需要一些间距来展现它们的弯曲。对于sans serif字体，更简单字体风格允许更紧凑的间距，以及更小的字体而最小程度地影响易读性。
总是使用合适的标签。比如使用<strong>代替<b>，使用<em>代替<i>，然后使用CSS去控制它们的样式。
适当地使用标题（h1-h6）：描述你的内容的不同部分到不同的逻辑分组。在<h1>之后使用<h2>表明接下来的部分是<h1>的字部分。使用CSS给它们定义任何你想要的样式，但是要保持你的标签主义化。
使用HTML标签来向HTML文档内容中添加值，并且使用CSS来控制他们的样式。例如，使用<small>代替<p>。
减小浏览器在找不到某个元素的样式规则时的猜测总是好的实践。别忘了给基本的HTML元素加上样式。
h1, h2, h3, h4, h5, h6 { } p { } ol, ul { } a { } blockquote { } pre, code { } small { }
对Line-Height使用1.5em
1.5em是最普遍且推荐的基准line-height；这表示line-height比文本font-size大50%，给文本块垂直空余空间。
这并不是说任何其它的line-height值都不好；但是在不确定的情况下，1.5em是比较安全的选择。
针对line-height使用相对测量单位也免去了计算相应的line-height，像下面这个例子：
p { font-size: 12px/1.5em;}
对于12px的font-size，18px的line-height可以达到相同的目的，但是如果你的改变其它元素的font-size时你需要重新计算line-height值是多少。
总是在可能的地方使用简写CSS，因为这是现在写CSS的一个惯例。这是一个font属性的简写结构：
font: [font-style] [font-size]/[line-height] [font-family 1, font-family 2, ..., font-family n]
例如：
p { font: normal 12px/1.5em Arial, Helvetica, sans-serif; }
在这部分，我们涵盖了一些CSS排版的技术，技巧，和最佳实践。在下一部分，我们会带给你一些非常好的CSS排版的例子以及一些可以简化你的工作的工具。[English]
| 猜您也喜欢： | ||||
 拥抱并使用CSS3 |
 使用CSS框架的优点和缺点 |
 CSS排版：例子和工具 |
 CSS排版: 基础 |
 体验更佳的打印样式的10条忠告 |
| 无觅 | ||||