HTML简历需导出为PDF投递，因其排版精准、可批量定制且利于ATS解析；须用@media print优化打印样式、内联SVG图标、语义化标签，并通过Chrome或Puppeteer稳定导出嵌入中文字体的PDF。
大厂不收纯 HTML 简历——HTML 文件本身不能直接投递，HR 系统（如牛客、实习僧、BOSS 直聘、企业自建系统）只接受 .pdf 或 .docx；但用 HTML 写简历是高效可控的「生产方式」，关键在输出、适配和细节控制。
用 HTML 写简历，为什么比 Word 更靠谱
Word 排版在不同设备/版本下极易错乱，而 HTML + CSS 能精确控制字体、间距、分页与打印行为；更重要的是，你可以用脚本批量生成多个岗位定制版（比如把「前端」关键词替换成「全栈」），也能一键导出为语义清晰、结构化的 PDF（对 ATS 简历解析友好）。
常见错误现象：margin 在 Chrome 打印预览里消失、中文断行异常、图标变成方块、页眉页脚被截断。
- 必须用
@media print单独写打印样式，禁用background-image和浮动布局 - 中文字体优先指定
"PingFang SC", "Hiragino Sans GB", "Microsoft YaHei"，末尾 fallbacksans-serif - 避免使用 Flex/Grid 布局做简历主结构——部分 PDF 导出工具（如 wkhtmltopdf）对它们支持不稳
- 所有图标改用内联 SVG 或 Unicode 字符（如
?、?），别用 Font Awesome 的 JS 加载方式
导出 PDF 时字体发虚、代码块变形怎么办
根本原因是浏览器打印或第三方工具未嵌入字体。Chrome 自带的「另存为 PDF」最稳定，但默认不嵌中文字体；wkhtmltopdf 默认用系统字体，Linux 服务器常缺「思源黑体」等开源中文字体。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 本地导出：Chrome 中打开 HTML →
Ctrl+P→ 选择「另存为 PDF」→ 勾选Background graphics（仅当你的背景是纯色或极简灰线时才开） - 自动化导出：用 Puppeteer 脚本，显式设置
printOptions.fonts并加载Noto Sans CJK SC的 woff2 文件 - 绝对不要依赖
@import引入 Google Fonts —— 导出时字体请求超时，回退成宋体，排版全崩 -
<pre class="brush:php;toolbar:false;"></pre>里的代码块用font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace，并设white-space: pre-wrap
怎么让 ATS（招聘系统）正确识别项目经历和技能关键词
ATS 不解析 CSS，也不执行 JS，它只读取 HTML 的 DOM 结构和文本流。如果你用 position: absolute 把「React」这个词压在右上角，ATS 就会把它和页脚的「©2024」连在一起识别成「©2024React」。
必须遵守的结构原则：
- 用语义化标签：
<section></section>包技能，<article></article>包每个项目，<h2></h2>是「项目名称」，<h3></h3>是「技术栈」 - 技能列表不用图标+文字混排，写成纯文本
<ul> <li>TypeScript</li> <li>Webpack</li> </ul> - 避免隐藏文本（
aria-hidden="true"或visibility: hidden）包裹关键词——ATS 可能直接跳过 - 时间字段统一用
<time datetime="2023-06">2023.06</time>，比「2023年6月」更易被结构化解析
真正难的不是写 HTML，而是控制导出链路中每一环：CSS 是否被裁剪、字体是否嵌入、语义标签是否被 ATS 当作噪音过滤、甚至 PDF 元数据里的 Title 和 Author 字段是否为空——这些地方一漏，就可能卡在第一轮自动筛选。
