六套版式共用同一份示例内容(张明 / 高级前端开发工程师),方便你直接对比排版差异。
每一份都是单文件、零依赖的 HTML —— 双击用浏览器打开,Ctrl + P 即可按 A4 打印或另存 PDF。
六套都已用无头 Chrome 真实导出验证过:全部严格落在 1 页 A4 之内, 底部还留了 11.7–27.7mm 的余量,换打印机也不会多出空白第二页。
Ctrl + P 打开打印对话框,目标选「另存为 PDF」或你的打印机。preview-pdf/ 里已经放好六套的导出结果,可以先拿来对一下。
做法:用无头 Chrome 把每套模板按 A4(210 × 297mm)、页边距 0、100% 缩放、保留背景色,真实渲染成 PDF, 再统计页数与正文最后一行的落点。下面数字是实测值,不是估算。
| 模板 | 正文止于 | 底部余量 | PDF 页数 | 结论 |
|---|---|---|---|---|
| 01 经典单栏 | 273.1mm | 23.9mm | 1 | 通过 |
| 02 左侧栏双栏 | 277.9mm | 19.1mm | 1 | 通过 |
| 03 时间轴 | 269.3mm | 27.7mm | 1 | 通过 |
| 04 极简衬线 | 270.6mm | 26.4mm | 1 | 通过 |
| 05 顶部横幅 + 卡片 | 285.3mm | 11.7mm | 1 | 通过 |
| 06 紧凑双栏 | 282.0mm | 15.0mm | 1 | 通过 |
「底部余量」= 297mm 减去正文最后一行所在位置,代表换成别的打印机、别的 Chrome 版本时还剩下多少容错空间。 普遍认为 8mm 以上是安全区,六套都在 11.7mm 以上。
body 的 font-size:10pt 更宽松,10.5pt 更饱满。改完打印看一眼就知道效果。font-size 降 0.2pt。:root 里(比如 --accent),改一个色值就能换整体风格。| 现象 | 原因 | 怎么改 |
|---|---|---|
| 多出一页空的或只有一两行 | 内容刚好超过一页高度 | 删掉 1–2 条次要经历,或把 body 的 font-size 降 0.2pt |
| 整体偏挤 / 偏空 | 字号与内容量不匹配 | 调 body { font-size };也可改 .page { padding } 的上下值(默认 14–15mm) |
| 色块不见了 | 打印设置未勾背景图形 | 见上方第 6 条;或改用模板 01 / 04 |
| 字体和你电脑上的不一样 | 用了系统未装的字体 | 模板已按 PingFang SC → 微软雅黑 顺序回退,Windows 上会落到雅黑,无需装字体 |
| 某段经历被切到第二页中间 | 分页位置落在条目内部 | 已通过 break-inside: avoid 处理;若仍发生,在该条目前插入 <div style="break-before:page"></div> 手动分页 |
| 想改成两页的详细版 | 内容确实放不下 | 用模板 06,它本来就是为多页设计的;或把 .page 的 min-height 去掉,让内容自然分页 |