纯HTML无法实现印刷级精细化排版，必须依赖CSS @page、print媒体查询、rem/ch单位、等宽中文字体及PDF导出验证。
纯 HTML 做不出真正“精细化排版”的简历——因为 HTML 负责结构，排版精度取决于 CSS，而浏览器渲染本身就有固有浮动误差、字体度量差异和行高计算偏差。想接近印刷级对齐（比如每行字数严格一致、段落缩进像素级可控、页边距分页稳定），必须用 CSS @page + print 媒体查询 + 固定字号/行高/盒模型，并接受它只在导出 PDF 时可靠。
用 rem 和 ch 单位控制字符宽度与行宽
中文简历最头疼的是“每行字数不均”：不同字体、不同浏览器对中文字符宽度的渲染略有出入。用 px 写宽度会失准，em 又随父级缩放漂移。rem 配合根元素固定 font-size 更稳；更关键的是用 ch 单位定义容器宽度——1ch ≈ 当前字体下“0”字符的标称宽度，对等宽字体尤其精准。
- 设
html { font-size: 16px; }，再用width: 45ch;控制简历主体宽度，基本能卡住 42–45 个中文字符/行 - 避免用
%或vw做主内容区宽度，打印预览时会被重算，导致换行错乱 - 禁用
word-break: break-all，它会把“JavaScript”硬切成“Java-Script”，破坏技术关键词可读性
打印时强制分页与避头尾的 @media print 规则
浏览器默认打印会随意断行、跨页切标题，甚至把“工作经历”标题和第一条内容分开。必须显式干预：
- 给每个一级模块（如
）加break-inside: avoid;，防止内部被拆到两页 - 给小标题（如
前端开发工程师
break-after: avoid;，避免标题孤悬页尾 - 用
@page { margin: 0.5in; }统一内外边距，比在body上设margin更可靠 - 移除所有
background-color和box-shadow，它们在多数浏览器打印中默认被禁用，留空隙反而难看
字体回退链必须包含等宽中文字体
简历里写“Git / Webpack / TypeScript”这类技术栈时，如果英文部分用了非等宽字体（如 system-ui），斜杠和括号位置会飘。解决方案是为代码类文本单独设字体栈：
code, .tech-tag {
font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
}
但中文字体也要匹配——Windows 用 "Microsoft YaHei"，macOS 用 "PingFang SC"，都非等宽。稳妥做法是：font-family: "Source Han Sans SC", "Noto Sans CJK SC", sans-serif;，这两者在 Adobe 和 Google 的设计规范中明确支持等宽汉字排版，且在 Chrome/Firefox 打印中表现一致。
真正卡点不在怎么写，而在验证：每次改完必须用 Chrome 的“打印 → 保存为 PDF”导出，再用 Acrobat 打开检查实际分页、字距和页眉页脚位置。屏幕上看齐整，不代表 PDF 里不偏移——这是最常被跳过的一步。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
