CSS网页排版

自印刷出版物诞生以来，排版就一直是平面设计的基础。

同样，排版在网页设计中也扮演着重要角色。

1.CSS的基本排版技术

1.1 文本颜色

对应网页而言，文本颜色也许是最基本的样式之一。

默认情况下，浏览器把绝大部分文本渲染为黑色。

p {
    color: #3b4348;
}

1.2 字体族

字体族（font-family）属性的值是一个备选字体的列表，按优先级从左到右排列。

body {
   /* 列出包含空格的字体族名称时，引号不是非加不可，但最好加上。*/
   /* 规范中只要求与通用字体族重名的字体族要加引号，但同时也建议给包含非标准符号的名称加引号 */
   /* 字体列表最后的serif叫作通用字体族，在这里充当没有选择的选择 */
  font-family: 'Georgia Pro', Georgia, Times, 'Times New Roman', serif;
}

Georgia是一种衬线字体。

衬线字体：“衬线”是字形笔画末梢的装饰性线条。

如果网页中要显示代码，应该首选monospace字体族，也叫“等宽字体”，因为monospace的每个字符的宽度都一样，不同行之间的字符可以完美对齐。

1.3 字型大小与行高

几乎所有浏览器中font-size的默认大小都是16像素，除非用户修改过偏好设置。

h3 {
    font-size: 1.314em; /* 21px */
}

em单位用于font-size属性时，实际上是一个相应元素继承的font-size缩放因子。

对于font-size属性，可用百分比代替em。

rem是基于根元素的em大小缩放，也就是基于html元素的font-size缩放。

长度单位还有mm、cm、in和pt等绝对物理长度，这些主要是给打印样式准备的。

1.4 行间距、对齐及行盒子的构造

如果行盒子中包含多个行高不一的行内盒子，那么这个行盒子的最终高度至少等于其中最高的行内盒子。

设置行高时，需要考虑当前字体大小。

body {
    line-height: 1.5;
}

给line-height设置没有单位的值1.5，意思是当前font-size的1.5倍。

也可以给line-height设置像素、百分比值或em值，但要注意body元素的所有子元素都会继承line-height的计算值。

如果给line-height设置没有单位的值，那么子元素继承的是一个系数，永远与自己的font-size成比例。

行内盒子也会受到verticaal-align属性的影响，它的默认值是baseline，即子元素的基线与父元素的基线对齐。

如果行盒子中有一个元素使用vertical-align调整了位置，那么它可能会扩展行盒子的高度。

1.5 文本粗细

我们使用font-weight属性来设置标题文本的粗细。

font-weight属性的值可以使用关键字：normal、bold、bolder和lighter，也可以使用100的整数倍：100、200、300、··· 900。

默认值normal对应400，bold对应700，这两个粗细值是最常用的。

如果某款字体缺少你想要的粗细变体，浏览器会尽量模拟加粗效果，但无论如何不能模拟变细效果。这种模拟的结果往往差强人意。

1.6 字体样式

设置font-style:italic会从字型中选择斜体显示，前提是存在这个变体。如果不能存在，浏览器会通过倾斜字体来模拟，但结果同样也不会太理想。

1.7 大小写变换和小型大写变体

使用text-transform属性控制英文字母大小写。

1.8 控制字母和单词间距

通过word-spacing属性来控制单词间的距离,。它的值意味着在默认词间距基础上增加或减少一定的量。

通过letter-spacing属性来控制字符间的距离。

2.版心宽度、律动和毛边

行长对阅读体验有着重大影响。用排版的行话说，就是版心宽度。

将article元素的宽度设置为38em，并令其在页面上居中。

article {
  max-width: 38em;
  margin: 0 auto;
}

2.1 文本缩进与对齐

设置段首缩进。

p + p {
  text-indent: 1.25em;
}

段落的右边参差不齐，我们暂时先不管它。这种参差不齐的样式在排版上也有术语，叫作“毛边”。

居中显示。

h1 {
    text-align: center;
    border-bottom: 1px solid #c8bc9d;
}

给text-align属性应用justify值，可以在单词间平均分布间距，结果是左右两端对齐，消除毛边。

2.2 连字符

手工在HTML中插入一个表示连字符的实体­。只有当浏览器需要断词换行时才会显示这个连字符。

使用hyphens属性，让浏览器帮我们插入连字符。

p { hyphens: auto; }

2.3 多栏文本

article {
    max-width: 70em;
    margin: 0 auto;
    columns: 20em; /* 在保证最小宽度20em的前提下，自动设置栏数 */
    column-gap: 1.5em;
}

columns属性是columns-count和column-width属性的简写形式。

columns-count属性表示最大栏数，column-width属性表示最小栏宽。

h1 {
    column-span: all; /* 横跨所有栏 */
}

在印刷设计中，律动关系的应用非常普遍，结果就是正文文本都会排进基线网格。

3.Web字体

使用Web字体需要考虑许可和侵权问题。

嵌入Web字体的关键是@font-face规则。

@font-face {
    font-family: Vollkorn;
    font-weight: bold;
    src:url('fonts/vollkorn/Vollkorn-Bold.woff') format('woff');
}

前面的@font-face块声明了在font-family值为Vollkorn且为粗体时应用该规则。之后提供了一个URL，供浏览器下载包含粗体字体的Web开放字体格式（WOFF，Web open font format）文件。

所有浏览器开发商都支持标准的WOFF格式。

为了解决旧版浏览器对字体格式支持的不一致问题，可以在@font-face规则中声明多个src值。

@font-face规则可以接受几个声明，多数是可选的。

• font-family：必需，字体族的名称
• src：必需，URL或URL列表，用于下载字体
• font-weight：可选的字体粗细
• font-style：可选的字体样式

这些声明是字体描述符（font descriptor），它们不会改变字体，它们的值只是为了告诉浏览器在什么情况下可以触发使用这个特定的字体文件。

浏览器加载和选择字体的原则：正确的font-family优先于正确的粗细值。

4.文本特效

4.1 合理使用文本阴影

CSS的text-shadow属性可以用来给文本绘制阴影。

对于标题或短文本，阴影适合模拟凸版印刷或者喷涂效果。

h1 {
  text-shadow: -.2em .2em .2em #ccc;
}

text-shadow需要指定相对于源文本x轴和y轴的偏移量、模糊距离和颜色值，由空格分隔。

除此之外，还可通过用逗号分隔来给文本添加多组阴影。多组阴影会按先后次序堆叠，先定义的在上，后定义的在下。

为同一段文本添加多组阴影可以模拟出压印或浮雕的效果，方法就是在文本上方和下方加上偏暗或偏亮的阴影。

可以利用多组阴影创造出3D效果。

几乎所有浏览器都支持text-shadow属性。对于支持它的浏览器而言，由于绘制阴影开销比较大，请不要滥用。

参考资料：

• 《精通CSS》— [英] 安迪·巴德、[瑞典] 埃米尔·比约克隆德