排印

元信息

• 目标：从印刷术（雕版与活字）理解数字排版的本职，建立 Web 排印意识——用 CSS 精确控制字号、行高、字距与段落；分清 CSS 对不同元素类型的控制边界，掌握 px/em/rem/vw 等度量单位的参照物
• 关键概念：排印、母版、置换元素、非置换元素、行高、绝对单位、相对单位、em、rem
• 关联阶段：cp1
• 常见误区：以为 CSS 能控制页面上一切内容（画布 canvas 内部 CSS 无能为力，图片等置换元素只能部分控制）；以为 px 是与设备无关的绝对物理尺寸（实际大小取决于 PPI）；em 的参照物搞混——用于 font-size 时相对父元素字体大小，用于 padding 等属性时相对元素自身

前置

• CSS基础：规则语法与选择器
• 字体：字体族与回退（排印决定"用多大的字、留多宽的行"，字体决定"用哪个字库"）

动机：码农，数字时代的排版工

在本周主线一「排印模式」的地图上，本篇是主线的本体：CSS 的基因是印刷排版，最小样式单位是字符。这一条解释了本周的一串"为什么"：排版属性为什么随继承传递（正文是一股连续的字符流）、em 的参照物为什么是字号（单位跟着字符走，见下文）、图片画布为什么只能部分控制（内容不是字符，见"控制边界"）。排印指令的值都带单位，单位的关键是参照物（谁的一半、谁的 1.6 倍）。

排印（typography）是对字体、字号、缩进、行间距、字符间距进行设计与安排的工艺，源于纸质媒体的印刷术。计算机软件本质上也是一套印刷系统——把信息通过电子媒体记录、传输、呈现，说穿了就是书写与印刷。所以有那句自嘲：码农，数字时代的排版工。

纸媒与电媒的类比

项目	纸媒	电媒
书写载体	纸张	电子屏幕
书写材料	墨水	发光像素
书写工具	笔	电流
书写质量	笔尖细度、纸墨质量	屏幕分辨率（见屏幕）
书写者	人	控制软件

印刷术的核心工序是制作母版：书写是昂贵的，复制是廉价的，母版是"写一次、印无数次"的那一份。

项目	纸媒印刷	电媒印刷
母版材料	木版、铜版	HTML/CSS 代码
制作母版	雕版或活字排版	编写 Web 文档
印刷设备	印刷机	计算机、浏览器
印刷结果	实体印刷品	屏幕显示（或打印）

电媒天生集书写与印刷于一体：代码写完，母版制作与印刷就绪同时完成。这正是第 2 周所说的"程序即文档"在排版上的投影。

雕版与活字的取舍同样值得回味：

雕版	活字
精度高，可文字可作画	最小单位是字模
一版一制，改一字整版重雕	字模可重用，随时打散重组

想一想：normalize.css 重置、CSS 变量、样式表复用，哪个更像活字思想？（改一处、处处生效的，都是活字的现代亲戚。）

Web 排印：CSS 的控制边界

以字符为最小单位的排版系统，遇到内容不是字符的对象，控制力就逐级衰减：

• 文本类标记（非置换元素）：CSS 可完全控制
• 多媒体标记（置换元素，内容被外部资源置换，如 <img>、<video>）：CSS 只能部分控制（尺寸、边框、滤镜，控不了内容本身）
• 语义化图形标记（如 SVG）：控制精度接近文本

• 画布 <canvas> 内部：CSS 完全无能为力（那是 JavaScript 的领地，见第 7 周）

顺带一问：用命令行浏览器看网页，图片和画布还显示吗？（回忆第 3 周的能力阶梯。）

度量：绝对单位与相对单位

排印的一切数值都要带单位。CSS 的单位分两类：

• 绝对单位：固定的物理尺寸约定，如 pt（磅，印刷常用）。px 一般归入此类，但它并非真正的绝对——一个 CSS 像素对应几个物理发光点，取决于屏幕的 PPI 与系统缩放（详见屏幕）
• 相对单位：相对另一个长度取值，如 %（一般相对父元素）、em、rem、vw

em 与 rem 是排印的主力，参照物必须分清：

• em：用于 font-size 时，相对父元素的字体大小；用于 padding 等其他属性时，相对元素自身的字体大小
• rem：root em，永远相对根元素 <html> 的字体大小（浏览器默认 16px）

em 的继承会层层复合。先预测再运行，下面这个 Hello 的字号是多少？

<!DOCTYPE html>
<html>
<head>
  <title>Parcel Sandbox</title>
  <meta charset="UTF-8" />
  <link rel="stylesheet" href="/styles.css" />
</head>
<body>
  <h1>Hello world</h1>
</body>
</html>

Open Sandbox

计算链：20px → 0.5em 得 10px → 再 0.5em 得 5px → 2em 得 10px。嵌套一深，心算就成了负担——这正是 rem 诞生的动机：把计算基点固定到根元素，一处改全局变、层层不用算。现代排印的常见分工：字号用 rem（稳定），随容器伸缩的间距用 em 或 %。

vw/vh 相对视口（viewport，浏览器可视区）宽高取值，1vw 即视口宽的 1%，是第 6 周响应式布局的常客，此处先记名词。

排印要素：行高、字距与段落

字定了、单位有了，排印三要素上场。行高（line-height）不指定单位时是字号的倍数，中文正文 1.6~1.8 为宜；段首缩进两格是中文排版传统，正好用 em 表达"两个当前字号"：

<!DOCTYPE html>
<html>
<head>
  <title>Parcel Sandbox</title>
  <meta charset="UTF-8" />
  <link rel="stylesheet" href="/styles.css" />
</head>
<body>
  <h1>Hello world</h1>
</body>
</html>

Open Sandbox

动手：把 1.6 改成 1，再改成 3，观察行框如何变；把 2em 改成 4em 看缩进深度。行距的本质是撑高行框（一行文字共用的虚拟矩形，见定型），行与行靠它呼吸。

顺带一提：行长的可读性上限约 30~40 个中文字符，超了就该考虑分栏或限宽（max-width），这是排版常识也是媒体查询里流体布局的动机之一。

小结

• 电媒排版 = 现代印刷：代码即母版，写完即印好
• CSS 的控制边界：非置换元素完全可控，置换元素部分可控，canvas 不可控
• 单位先问参照物：em 相对父（或自身）、rem 相对根、vw 相对视口；px 并非绝对
• 行高、字距、缩进是排印三要素；中文习惯行高 1.6 上下、段首 2em

延伸

• 想快速套用精良的中文排印，可试用现成模板：Hanzi、Entry.css、wysiwyg.css
• 字体本身的来龙去脉见字体；行框与盒子的机制见定型

参考

• MDN 文本样式 https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Styling_text/Fundamentals
• CSS 单位一览 https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Values_and_Units