纯html+内联css可打印简历需:①所有样式写在中,用基础盒模型和字体控制;②禁用外部资源,仅保留和;③@page设0.4in边距,section加break-inside: avoid;④字体用系统栈并分离中英文,禁用背景图形导出。

用纯 HTML + 内联 CSS 生成可直接打印的简历
不需要框架、不引入外部样式表、不依赖 JavaScript —— 纯靠 + <style></style> 就能输出干净、无广告、无追踪、适配 A4 打印的简历。关键在于:所有样式写在 <style></style> 里,且只用最基础的盒模型和字体控制。
常见错误是套用 Bootstrap 或 Tailwind 模板,结果带了一堆没用的 class、响应式断点、甚至内联脚本;或者用 Markdown 转 HTML 工具,生成一堆 <div class="markdown-body"> 这类冗余 wrapper。
<ul>
<li>只用 <code><section></section>、<h2></h2>、<p></p>、<ul></ul>(注意:此处 <ul></ul> 是语义必需,不算杂质)
font-family: "Segoe UI", "Helvetica Neue", sans-serif;,避免系统缺失字体导致回退到等宽或乱码@media print 规则,隐藏页眉页脚、链接下划线、背景色:@media print {
a { text-decoration: none; color: #000; }
body { margin: 0; padding: 0; }
@page { margin: 0.5in; }
}
如何让简历在 Chrome / Edge 打印时不出现在第二页顶部留白
这是最常被忽略的排版断裂点:浏览器默认 @page 有边距,且段落 margin-bottom 在分页时会“撑开”空白。不是内容太多,而是 CSS 没做分页控制。
- 给
设margin: 0,并显式声明@page { margin: 0.4in; }(0.4in ≈ 1cm,比默认 0.6in 更紧凑) - 所有
<section></section>后加break-inside: avoid;,防止教育经历被切成两半 - 避免用
min-height或flex: 1填满页面——它们在打印时行为不可控;改用固定行高 + 显式高度估算(如line-height: 1.4; font-size: 12px;下,一页约容 48 行)
去掉所有隐性“杂质”:meta、script、第三方字体
所谓“纯净”,不只是视觉干净,更是源码干净、无副作用。很多简历 HTML 文件开头塞了 <meta name="viewport">、<script></script> 统计代码、Google Fonts 的 <link> —— 这些对打印毫无意义,还可能触发网络请求或字体加载失败。
- 删掉全部
<script></script>和<link rel="stylesheet">(Google Fonts 必须放弃,用系统字体栈) - 只保留必要
<meta>:<meta charset="utf-8">和<meta name="robots" content="noindex">(防搜索引擎收录) - 如果必须强调某段文字(比如公司名),用
<strong></strong>,别用<span style="font-weight:700"></span>—— 语义清晰且体积更小
导出为 PDF 时字体发虚或中英文混排错位
根本原因:浏览器 PDF 导出器对子像素渲染和字体回退处理不一致。Chrome 默认用系统字体渲染,但导出 PDF 时可能降级为 Courier 或 Times,尤其遇到中文。
- 强制中英文字体分离:
font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif; - 禁用字体平滑:
-webkit-font-smoothing: antialiased;(仅限 WebKit,不影响打印,但能统一预览效果) - 导出前按
Ctrl+P→ “更多设置” → 关闭“背景图形”(否则浅灰底色会变深灰,吃墨) - 真正保险的做法:用命令行
chromium --headless --print-to-pdf=resume.pdf resume.html,绕过 GUI 渲染差异
越想“纯净”,越要亲手控制每一处默认行为。字体、分页、导出链路——任何一个环节交给浏览器自动猜,杂质就藏进去了。











