在这个系列的第一部分，我们讨论了一些与CSS排版的基础概念。现在我们将讨论一些出色的技术，建议，技巧以及处理网站排版的最佳实践。

     这是CSS排版参考三篇系列中的第二部分，这三篇将涵盖从基本语法到最佳实践，以及CSS排版相关工具的内容。

用@font-face改善网页排版

    对于普通文本块，使用巧妙的字体栈(如第一部分讨论的)是一个不错的主意，但是对于标题和短文本块，可以借助@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;}

    需要了解更多的在网页布局中创建基线或垂直节奏的信息，查看以下列出的文章。此外还有一个方便的工具“垂直节奏生成器”，如果你不想计算所有东西的话。

建议继续学习：

1. CSS排版：例子和工具    (阅读：4809)
2. 中文段首不需要空两格    (阅读：3334)
3. 空行不空格式排版组织原理    (阅读：3003)
4. CSS排版: 基础    (阅读：2933)
5. 云标签，关键字图排版 html5 canvas版（一）    (阅读：3008)
6. 文字编排的易读性    (阅读：2902)
7. 繁体中文的混合排版    (阅读：2580)
8. 讨论：长文的数字排版与阅读    (阅读：2367)
9. 手机版阿里图文排版案例    (阅读：2156)