精通CSS-网页排版

一、CSS的基本排版技术

1. 文本颜色

通过color属性可以设置文本的颜色，属性值支持以下格式：

• 颜色名称：red、blue、white…
• 十六进制：#RRGGBB和#RGB，#后面跟6位或者3位十六进制字符；
• RGB：rgb(R,G,B)，取值可以是0~255的整数或者百分比；
• RGBA：rgba(R,G,B,a)，其拓展了RGB颜色模式，它包含了阿尔法通道，允许设置透明度（a为透明度，0为透明，1为不透明）；
• HSL：hsl(H,S,L)，色相-饱和度-明度，色相表示一个色环的一个角度，饱和度和明度使用百分比来表示；
• HSLA：hsla(H,S,L,a)，其拓展了RGB颜色模式，它包含了阿尔法通道，允许设置透明度（a为透明度，0为透明，1为不透明）；

2. 字体族

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

body{
	font-family: 'Georgia Pro', Georgia, Times, 'Times New Roman', serif;
}
h1,h2,h3,h4,h5,h6{
	font-family: 'Avenir Next', SegoeUI, arial, sans-serif;
}

  body元素（以及几乎其他所有元素）使用的字体依次是 ‘Georgia Pro’, Georgia, Times, ‘Times New Roman’, serif（因为 font-family 是个可继承属性）。Georgia 是一种几乎无处不在的衬线字体，而较新的 Georgia Pro 则默认安装在某些版本的 Windows 10 中。如果用户计算机中两个版本的 Georgia 字体都不存在，那么备选字体 Times 和 Times New Roman 应该很多计算机系统中都会安装。最后，如果前4种字体都没有，就由浏览器选择一种衬线字体（serif）。
  对于标题，Avenir Next 是首选字体，这种字体在现代 Mac OS X 和iOS系统中有很多变体。如果这种字体不存在，浏览器会去找 SegoeUI，一种类似的、在大多数 Windows 版本系统及 Windows Phone 中都会安装的通用无衬线字体。但浏览器可能也找不到它，此时再尝试 Arial（几乎所有平台中都有）。最后才是当前系统中默认的无衬线字体（sans-serif）。

  这种后备机制是 font-family 属性的重要特性，因为不同的操作系统和移动设备可能安装了不同的字体。何况字体的选择也不仅仅是看某种字体是否存在。如果优先的字体中缺少文本中用到的字形，比如重读符号，浏览器会为缺失的符号向后查找其他字体。
  关于什么操作系统中默认安装了哪些字体，有些人已经做过相关的研究整理。推荐大家看看这个网站：https://www.cssfontstack.com
  字体列表最后的 serif 和 sans-serif 叫作通用字体族，在这里充当没有选择的选择。此外，还有 cursive、fantasy和monospace 等通用字体族，只不过 serif 和 sans-serif 应该是最常用的两个。如果网页中要显示代码，应该首选 monospace字 体族，也叫“等宽字体”，因为 monospace 的每个字符的宽度都一样，不同行之间的字符可以完美对齐。fantasy 和 cursive 就没那么常用了，分别对应花式字体和手写字体。

3. 字型大小与行高

  几乎所有浏览器中 fot-size 的默认大小都是16像素，除非用户修改过偏好设置。我们不修改默认的 font-size，而是选择使用em单位调整特定元素的大小：

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

  em单位用于 font-size 属性时，实际上是一个相应元素继承的 font-size 缩放因子。比如我们的h3元素，字型大小就是1.314*16=21px。虽然可以直接设置21px，但em更灵活一些。但下面这种情况就不适用了：

article{
	font-size:1.314em;
}
p{
	font-size:1.314em;
}

  如果p元素的父元素是 article，最终p元素的 font-size 会变成1.314em×1.314em，约等于1.73em或28像素。这恐怕与原来所想的不同。

  而最灵活的方式则是使用rem单位。与em类似，rem也是一个缩放因子，但它始终基于根元素的em大小缩放（根元素的em，就是root element em，即rem），也就是基于html元素的 font-size 缩放。

基于比例缩放字型大小

  font-size 到底应该选多大，其实没有硬性要求。我们这里标题的大小大致符合一个叫作“纯四度”（perfect fourth)的数学比例，即上一级标题会比下一级标题的字型大小大自身尺寸的1/4，或者说是下一级标题字型大小的1.333333.倍。这里的数值经过舍入，以匹配最接近的像素值，并且只保留了3位小数：

h1{
	font-size: 2.315em; /37px *
}
h2{
	font-size: 1.75em; /28px *
}
h3{
	font-size: 1.314em; /21px *
}

4. 行间距、对齐及行盒子构造

下图展示了构成一行文本的各个部分，这里仅以示例中第一段开头的两个词。

<p>The <strong>Moon</strong>...[etc]</p>

  精通CSS-盒子模型中大致介绍过行内格式化，提到每行文本都会生成一个行盒子。行盒子还可以进一步拆分成表示行内元素（比如上面例子中的<strong>元素）的行内盒子，或者连接两个行内元素的匿名行内盒子。
  行内盒子中的内容区显示文本。内容区的高度由font-size的测量尺度，即图中“Moon”末尾那个1em见方的块，以及这个块与字形本身的关系来决定。
  小写字母“x”的上边界决定了所谓的“x高度”。不同字体的x高度差异很大，因此很难就字体大小给出一个通用的建议。要想知道精确的字型大小，就必须分别测试。
  然后，字形会被摆放在内容区中，每个字形都在垂直方向上不偏不倚，使得每个行内盒子的底边都默认对齐于靠近底部的共同水平线，这条线叫基线。内容区也不一定会限制住字形，比如某些字体中的小写字母“g”就会向下伸出内容区。
  最后，行高指的是行盒子的总高度。更通俗的叫法是行间距，排版术语叫铅空，就是排字员用来隔开字符行的铅块。但与传统排版不同，CSS中的“铅空”始终都会同时应用到行盒子的上方和下方。
  半铅空计算方法：行盒子的整体行高减去 font-size，得到的值再平分成两份，也就是半铅空如果 line-height 是30像素，而 font-size 是21像素，那么半铅空就是4.5像素。

（1）设置行高

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

body{
	font-family: Georgia,Times, 'Times New Roman', serif;
	line-height: 1.5;
}

  这里给 line-height 设置了没有单位的值1.5，意思就是当前 font-size 的1.5倍。body的 font-size 为16px，那么默认的 line-height 就是24px。
  也可以给 line-height 设置像素值、百分比值或em值，但要注意 body 元素的所有子元素都会继承 line-height 的计算值。换句话说，就算 body 的 line-height 用的是百分比或em，其子元素继承的都是计算后得到的像素值，但无单位的值就不会导致这个结果。因此，如果给 line-height 设置没有单位的值，那么子元素继承的是一个系数，永远与自己的 font-size 成比例。

（2）垂直对齐

  除了 line-height，行内盒子也会受到 vertical-align 属性的影响。它的默认值是 baseline，即子元素的基线与父元素的基线对齐。下列值使元素相对其父元素垂直对齐：

值	描述
sub	使元素的基线与父元素的下标基线对齐。
super	使元素的基线与父元素的上标基线对齐。
text-top	使元素的顶部与父元素的字体顶部对齐。
text-bottom	使元素的底部与父元素的字体底部对齐。
middle	使元素的中部与父元素的基线加上父元素 x-height（x 高度）的一半对齐。

下列值使元素相对整行垂直对齐：

值	描述
top	使元素及其后代元素的顶部与整行的顶部对齐
bottom	使元素及其后代元素的底部与整行的底部对齐

5. 文本粗细

  font-weight 属性来设置标题文本的粗细。可以使用关键字：normal、bold、bolder 和 lighter。也可以直接给出数字值，都是100的整数倍：100、200、300、400，等等，最大为900。font-weight 属性还需要字体是否支持，如果一个字体只有 normal 和 bold 两种粗细值选择，指定粗细值为 100-500 时，实际渲染时将使用 normal，指定粗细值为 600-900 时，实际渲染时将使用 bold 。

值	描述
normal	正常粗细。与400等值
bold	加粗。与700等值
lighter	比从父元素继承来的值更细 (处在字体可行的粗细值范围内)
bolder	比从父元素继承来的值更粗 (处在字体可行的粗细值范围内)

6. 文本样式

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

值	描述
normal	选择 font-family 的常规字体。
italic	选择斜体，如果当前字体没有可用的斜体版本，会选用倾斜体（oblique ）替代。
oblique	选择倾斜体，如果当前字体没有可用的倾斜体版本，会选用斜体（ italic ）替代。如果所选字体系列中有一个或多个不同倾斜角度的可用的样式，则选择与指定角度最匹配的斜面。如果没有可用的斜面，浏览器将通过将正常面倾斜指定的量来合成字体的斜面版本。
oblique <number>deg;	如果所选字体系列中有一个或多个不同斜面的可用的样式，可以在oblique后加上倾斜角度，选择与指定角度最匹配的斜面。如果没有可用的斜面，浏览器将通过将正常面倾斜指定的量来合成字体的斜面版本。

7. 大小写变换和小型大写变换

  text-transform 属性可以控制英文字母大小写

值	描述
uppercase	把所有字母都显示为大写
lowercase	把所有字母都显示为小写
none	显示HTML源码中的默认大小写形式
capitalize	把每个单词的首字母变成大写

  CSS还有一个属性 font-variant，可以通过值 small-caps 把英文文本转换成所谓的“小型大写字母”。“小型大写字母”也是一种字型的变体，虽然所有字母都大写，但只有首字母是正常大小，其他字母的大小跟原来小写时一样，就像缩小了似的。正确的 small-caps 变体很大程度上会依据字母的字形来变化，而不仅仅是简单地缩小字母。不过能做到这一点的多数是收费字体。浏览器会在你没安装这些字体时尝试模拟类似的行为。可以通过abbr标签包含的首字母缩写来示范一下浏览器的行为。

<abbr title="National Aeronautics and Space Administration">NASA</abbr>

abbr{
	text-transform: lowercase;
	font-variant: small-caps;
	line-height: 1.25;
}

8. 控制字母和单词间距

  首先是 word-spacing 属性，功能是控制词间距，很少用。它的值意味着在默认词间距基础上增加或减少一定的量，而默认词间距由当前字体中空白字符的宽度决定。以下规则将在默认词间距基础上增加0.1em:

p{
	word-spacing:0.1em;
}

  类似地，可以通过 letter-spacing 属性来控制字符间的距离。对于小写英文字母的文本来说，人为改变字母间距并不是好事，因为大多数字型的设计初衷都是让人更容易辨别整个单词，而随意调整字母间距可能导致文本难以辨别。对于大写字母（或小型大写字母）的文本而言，则要视情况而定。比如缩写词，稍微加大一点字母间距有助于阅读。下面就给前面的abbr标签设置一个 letter-spacing 试一下。

abbr{
	text-transform: lowercase;
	font-variant: small-caps;
	letter-spacing: 0.1em;
}

二、版心宽度、律动和毛边

  文本的行长（用排版的行话说，就是版心宽度）对阅读体验有着重大影响，过长或过短的文本行会打断人的眼球移动，导致读者无法连续阅读，最后甚至读不下去。
  主体内容的文本行长通常是45~75个字符，平均值为66个字符。对于小屏幕（或者远距离观看的大屏幕，如电影或投影）而言，行长至少也应该有40个字符。

1. 文本缩进与对齐

  设置 text-indent 属性，可以设置段首缩进。

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

  默认情况下，文本是左对齐的。设置 text-align 属性可以改变文本的对齐方式。它接受下列任意一个关键字值：left、right、center和justify。CSS Text Level 3 规范还额外定义了几个值，包括 start 和 end。这两个逻辑方向关键字与文本书写模式相对应：多数西方语言都是从左向右书写，因此如果文本语言是英语，那么start就代表左对齐，end 代表右对齐。而在从右向左书写的语言中（如阿拉伯语），就正好相反。如果给父元素设置了 dir=“rtl” 属性，即从右向左显示，浏览器通常都会自动反转默认的文本方向。
  给 text-align 属性应用 justify 值，可以在单词间平均分布间距，结果就是左右两端对齐，消除毛边（文本右边参差不齐）。

2. 连字符

  浏览器处理文本两端对齐时使用的算法挺粗糙的，容易出现由文本空白构成的“串流”(river of whitespace)现象。

  如果你仍然打算在页面中让文本两端对齐，那么连字符可能会有助于减轻串流问题。为此，可以手工在 HTML 中插入一个表示连字符的实体，即所谓的软连字符 &sy; 。只有当浏览器需要断词换行时才会显示这个连字符。

<p>The Moon (in Greek:oeanvn Selene,in Latin:Luna)is Earth's only natural satel &sy; lite.It is one of the largest natural satellites in the Solar System,and,among</p>

  对于文章之类的长文本，手动逐个插入连字符并不现实。此时可以使用 hyphens 属性，让浏览器帮我们插入连字符。
  要想使用自动连字符功能，需要保证两点。首先，在网页 html 元素中设置语言代码：

<html lang="en">

  其次，通过 CSS 将相关元素的 hyphens 属性值设为auto。

p{
	hyphens:auto;
}

3. 多栏文本

  将文本行长控制在45~75个字符，对于大屏幕而言，却又太浪费空间了，留着大片的空白很可惜！有时候，为了有效利用宽屏，可以把文本分成多栏，并对每栏的宽度加以限制。CSS Multi-column Layout Module 定义的属性可以让我们把文本内容切分成多个等宽的栏。

article{
	max-width:70em;
	columns:20em;  /*每栏的宽度*/
	column-gap:1.5em; /*栏间距*/
	margin:0 auto;
}

  这里的 columns 属性是 column-count 和 column-width 属性的简写形式。如果只设置 column-count 属性，浏览器会严格生成指定数量的栏，不管宽度如何。如果同时设置了 column-count 和 column-width，则前者会作为最大栏数，后者会作为最小栏宽。

跨栏

  在前面的例子中，文章中的所有元素都排在了栏内文本流中。其实可以让某些元素排到该文本流之外，强制它们伸长以达到跨栏效果。下图中文章标题和最后一段（包含来源链接）就横跨了所有栏：

.h1, .source{
	column-span: all; /*或columne-span:none;,以关闭跨栏特性*/
}

  如果让位于文本流中间的一个元素横跨所有栏，那么文本会按照垂直切分后的几栏流动。在下图中，我们为 h2 元素应用了上面的规则，结果该标题前面后的文本分别灌入了各自的几个分栏。

垂直律动与基线网格

  前面提到过，在排版时运用一些数学关系很有好处。比如，对于不同标题的大小，我们采用“纯四度”关系（比率约为1.26）。同时，所有标题都应用了值为1.5rem(相当于一行正文高度的 margin-top。此外，所有分栏的间距也是统一的。
  在印刷设计中，这种律动关系的应用非常普遍，结果就是正文文本都会排进基线网格。即使标题、引用或其他页面部件时不时会打破这种律动，大的格局也不会受影响。
  在网页设计中，要保证基线准确可是麻烦多了，尤其是在视口会变、允许用户上传图片的情况下。不过在可能的情况下，还是有必要这样做的，比如使用多栏文本布局的时候。在下图中可以看到，由于标题的存在，各栏中的文本行并没有严格对齐。

  下面我们做一下调整，让两个标题的上外边距、行高和下外边距加起来恰好等于 line-height 值的整数倍。这样，所有栏的文本基线就可以对齐了。

h2{
	font-size: 1.75em; /*28px */
	line-height: 1.25; /*28*1.25=35p×*/
	margin-top: 1.036em; /*29px */
	margin-bottom: .2859em; /*8px */
}
h3{
	font-size: 1.314em; /*21px */
	line-height: 1.29; /*1.29*21=27px*/
	margin-top: .619em; /*13px */
	margin-bottom: .38em; /*8px */
}

  起初，标题的 line-height 都是1.25，但为了简化计算，我们做了相应调整。总体来看，margin-top 和 margin-bottom 的值是凭感觉设置的。不过重点在于，所有这些规则加起来恰好是正文行高的整数倍。h2是72px，h3是48px。这时候，三栏中正文的基线就完全对齐了：

三、Web字体

1. @font-face 规则

  嵌入 Web 字体的关键是 @font-face 规则。通过它可以指定浏览器下载 Web 字体的服务器地址，以及如何在样式表中引用该字体。

@font-face {
	font-family: Vollkorn;
	font-weight: bold;
	src: url("fonts/vollkorn/Vollkorn-Bold.woff") format('woff');
}
h1,h2,h3,h4,h5,h6{
	font-family: Vollkorn,Georgia,serif;
	font-weight: bold;
}

  前面的 @font-face 块声明了在 font-family 值为 Vollkorn 且为粗体时应用该规则。之后提供了一个URL，供浏览器下载包含粗体字体的 Web 开放字体格式（WOFF, Web open font format）文件。声明了新的字体 Vollkorn 后，就可以在随后的 CSS 中通过 font-family 属性正常使用它了。

字体文件格式

  所有浏览器开发商都支持标准的 WOFF 格式，有的甚至支持较新的 WOFF2。如果你的项目需要支持 IE8 及更早版本的IE、旧版本的 Safi 或早期的安卓设备，那么可能要多写几行代码，补足各种格式的字体文件，比如 SVG、EOT和TTF。
  为了解决旧版本浏览器对字体格式支持的不一致问题，可以在 @font-face 规则中声明多个 src值（与 font-family 很像），包括 format() 提示。然后，由浏览器来决定到底使用哪种格式。做到这一步，基本上就可以实现Web字体的跨浏览器支持了。比如以下的@font-face规则：

@font-face{
	font-family:Vollkorn;
	src: url('fonts/Vollkorn-Regular.eot#?ie') format('embedded-opentype'),
		 url('fonts/Vollkorn-Regular.woff2') format('woff2'),
		 url('fonts/Vollkorn-Regular.woff') format('woff'),
		 url('fonts/Vollkorn-Regular.ttf') format('truetype'),
		 url('fonts/Vollkorn-Regular.svg') format('svg');
}

  以上例子涵盖了支持 EOT、WOFF(包括WOFF2)、TTF 和 SVG 的所有浏览器，几乎就是现在市面上能见到的所有浏览器了。而且，通过在 src 的值中使用查询字符串，甚至可以满足 IE6~8 的古怪行为。

字体描述符

   @font-face 规则可以接受几个声明：

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

   要注意的是，这些声明与通常规则中的 font 属性不是一回事。这几个都不是属性，而是字体描述符(font descriptor)。它们不会改变字体，它们的值只是为了告诉浏览器在什么情况下可以触发使用这个特定的字体文件。
   @font-face 的 font-weight 值为bold，那么就是告诉浏览器：“如果 font-family 中字体的 font-weight 设置成了 bold，那么可以使用这里定义的字体文件。”此处有一个陷阱：假如 Vollkorn 只在这里定义了这么一次，那么其他粗细也可以使用这里的字体文件，无论是否匹配。这是由于标准规定的浏览器加载和选择字体的原则：正确的 font-family 优先于正确的粗细值。

很多字型包含不同粗细、样式和变体的字体，因此可以在 @font-face 块中使用相同的 Vollkorn 名称，但引用不同的字体文件。在下面的例子中，我们加载了两种不同的字型，声明了具体的粗细值和样式对应的字体文件：

@font-face{
	font-family: AlegreyaSans;
	src: url('fonts/alegreya/AlegreyaSans-Regular.woff2') format('woff2'),
		 url('fonts/alegreya/AlegreyaSans-Regular.woff') format('woff');
	/*字体粗细和样式都为默认值normal*/
}
@font-face{
	font-family: Vollkorn;
	src: url('fonts/vollkorn/Vollkorn-Medium.woff') format('woff'),
		 url('fonts/vollkorn/Vollkorn-Medium.woff') format('woff');
	font-weight: 500;
}
@font-face{
	font-family: Vollkorn;
	font-weight: bold;
	src: url('fonts/vollkorn/Vollkorn-Bold.woff') format('woff'),
		 url('fonts/vollkorn/Vollkorn-Bold.woff') format('woff');
}

在随后的样式表中，通过声明不同的粗细值，就可以分别使用不同的字体文件：

body{
	font-family: AlegreyaSans,Helvetica,arial,sans-serif;
}
h1,h2,h3,h4,h5,h6{
	font-family: Vollkorn,Georgia,Times,'Times New Roman',serif;
	font-weight: bold;/*使用Vollkorn Bold字体*/
}
h3{
	font-weight: 500;/*使用Vollkorn Medium字体*/
}

2. Web 字体、浏览器与性能

  Web 字体给网页设计带来了很大的飞跃，但同时也给网页中的实际应用带来了一些麻烦。
  在下载 Web 字体的时候，浏览器有两种方式处理相应的文本内容。第一种方式是在字体下载完成前暂缓显示文本，术语叫 FOIT(flash of invisible text)。Safari、Chrome 和 IE 默认采用这种方式，问题是用户必须等待字体下载完成才能看到内容。如果用户的网络速度很慢，这个问题会非常明显。第二种方式是在字体下载完成前，浏览器先用一种后备字体显示内容。这样可以避免因网速慢而引起的问题，但也会带来字体切换时的闪动问题。这个闪动有时候也被称为 FOUT (flash ofunstyled text)。
  如果你想更好地控制浏览器处理 Web 字体的方式，包括如何显示 Web 字体和后备字体，那么可以选择使用 JavaScript 加载字体。

3. 使用 JavaScript 加载字体

  使用 FontFace() 构造函数可以动态加载Web字体，参数：

• family：指定将用作字体属性的字体面值的名称。采用与 @font-face 的 family 描述符相同类型的值。
• source：字体源。可以是 url 地址或二进制字体数据。
• descriptors：可选。作为对象传递的一组可选描述符，它可以包含 @font-face 中任何可用的描述符。

<body>
	<div style="font-family: siyuan; font-size: 60px;" >思源柔字体</div>
	<script>
		setTimeout(() => {
			let font = new FontFace('siyuan','url(./GenJyuuGothic-P-Normal.ttf)', {
				style: 'normal',
				weight: '400',
				stretch: 'condensed'
			});
			font.load().then(function(loaded_face) {
				document.fonts.add(loaded_face);
			})
		}, 2000)        
	</script>
</body>

四、文字特效

1. 合理使用文本阴影

  CSS的 text-shadow 属性可以用来给文本绘制阴影。对于标题或短文本，阴影倒是大有用武之地，非常适合模拟凸版印刷或者喷涂效果。
  text-shadow 属性的语法非常直观，需要指定相对于源文本x轴和y轴的偏移量（可正可负）、模糊距离（0意味着完全不模糊）和颜色值，由空格分隔：

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

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

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

2. 使用 JavaScript 提升排版品质

许多 jQuary 插件可以帮我们提升网页的排版品质，下面推荐几个：

• fitText,js: 由Paravel公司 lettering.js 开发团队开发的一款 jQuery 插件，可以让文本随页面大小缩放。
• BitText.js: Filament Group 的 Zach Leatherman 写的脚本，可以让一行文本放大到尽可能与包含它的容器一般大。
• Vidowtamer: Gridset.com 的 Nathan Ford 写的脚本，通过在一段的末尾每隔一定距离就在单词间插入非换行空白符，来防止出现意外的孤行。