html证书模板需用绝对定位或grid/flex精确定位字段，禁用流式布局；变量用{{name}}占位并包裹于带class标签；字体图片须本地化；适配viewport与@media print；确保多端导出对齐一致。
HTML 本身不能“生成”证书模板，它只是容器；真正决定证书是否可用、可批量、可验证的，是模板结构是否支持动态注入、样式是否适配打印/截图/PDF 转换、以及关键字段（如姓名、日期、签名）能否被程序精准定位和替换。
证书模板必须用绝对定位或 CSS Grid/Flex 布局控制文字位置
常见错误是直接用 <p></p> 或 <div> 堆文字，结果导出 PDF 或 Canvas 截图时错位、换行、字体截断。浏览器渲染流式布局天然不稳定，尤其在跨设备或转 PDF 时。
<ul><li>用 <code>position: absolute 配合固定宽高容器（如 <div class="cert-wrapper">），把每个字段（<code>name、date、award）单独包裹并精确定位
float 或 inline-block 对齐关键字段——它们受内容长度影响大，一换名字就偏移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 的标签里，例如
<span class="cert-name">{{name}}</span>，方便 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" - 移除所有
<script></script>标签（除了你主动控制导出逻辑的那个），第三方统计、热力图脚本会干扰渲染顺序 - 调用
html2canvas前，手动执行document.fonts.load("12px 'YourFont'")等待字体就绪，否则截图里全是空白
移动端预览和打印适配最容易被忽略
用户常在手机上填完信息直接点“生成”，结果证书被缩放、裁切、或日期挤成两行——这不是 bug，是没处理 viewport 和打印媒体查询。
- 加这行 meta：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">，禁掉双指缩放，防止用户误操作放大后截图变形 - 为打印加独立 CSS：
@media print { body { margin: 0; padding: 0; } .no-print { display: none; } }，隐藏按钮、输入框等非证书内容 - 证书容器宽度建议设为
794px（A4 宽度 210mm × 96dpi ≈ 794px），高度按比例定，避免浏览器自动加滚动条影响截图 - 测试真机 Safari 和 Chrome for Android —— iOS 上
html2canvas对 transform 支持差，尽量少用rotate或scale
最麻烦的从来不是画个好看模板，而是让同一个 HTML 在 Safari 截图、jsPDF 渲染、微信内嵌 WebView 显示、以及打印机直出时，都保持字段对齐、字体一致、无空白页。每多一个输出目标，就要多一层兜底校验。
