HTML证书模板制作技巧与在线生成避坑指南

• 用 position: absolute 配合固定宽高容器（如
  ），把每个字段（name、date、award）单独包裹并精确定位
• 避免用 float 或 inline-block 对齐关键字段——它们受内容长度影响大，一换名字就偏移
• 如果用 CSS Grid，定义明确的 grid-template-areas，比如 "name name" "award award" "date org"，再用 place-items: center 居中，比靠 margin/padding 更可控
• 所有文字元素必须设 font-family 和 font-size，禁止依赖系统默认字体（iOS 和 Windows 渲染微软雅黑/苹方差异极大）

不要在 HTML 模板里硬编码证书数据

模板 ≠ 成品证书。一旦把 张三、2026年4月19日 写死在 HTML 里，就彻底失去批量能力。所有变量必须用占位符，且格式统一、无歧义。

• 推荐用双大括号语法：{{name}}、{{date}}、{{award}}——简单、易识别、不易与 HTML 标签冲突
• 避免用 ${name}，容易和 ES6 模板字符串混淆，尤其在前后端混用场景下
• 占位符必须包裹在有明确 class 的标签里，例如 {{name}}，方便 JS 后续 querySelector 精准替换
• 如果要兼容 PDF 导出（如 jsPDF + html2canvas），占位符所在元素不能设 display: none 或 visibility: hidden，否则会被跳过

导出为图片或 PDF 前，必须禁用所有外部资源请求

很多模板加载了 CDN 字体、远程图标、甚至 Google Fonts，导致离线生成失败、二维码失效、或 PDF 中文字变方块。

• 字体必须本地化：下载 .ttf/.woff2，用 @font-face 声明，并确保 font-display: swap 不被触发（导出时没时间等加载）
• 所有图片用 base64 内联，或转为相对路径并打包进项目目录；禁止 src="https://xxx.com/logo.png"
• 移除所有