HTML如何制作奖状模板_html电子奖状模板制作方法【参考】

核心是确保A4尺寸、安全边距、字体嵌入和打印一致性：用@media print与@page { size: A4; margin: 1.5cm; }，容器设width: 210mm; height: 297mm;，优先@font-face引入Noto Serif SC等可商用Web字体，姓名用textContent动态替换并延迟100ms再打印。

直接用 HTML + CSS 做奖状，核心不是“画得多漂亮”，而是让文字居中、留白合理、打印时不出错——多数人卡在字体不嵌入、页面尺寸错乱、或浏览器打印预览里内容被截断。

怎么设置 A4 尺寸和安全边距

浏览器默认按屏幕渲染，打印时必须显式声明纸张大小和边距，否则 @media print 下内容常被裁掉顶部或右侧。

• 用 @page 设置尺寸：

  @page { size: A4; margin: 1.5cm; }

• 外层容器加 width: 210mm; height: 297mm;（A4 毫米值），并设 margin: 0 auto; 居中
• 避免用 % 或 vh/vw 布局，改用 mm、cm 或固定 px（96dpi 下 1cm ≈ 37.8px）
• Chrome 打印预览中勾选「背景图形」，否则 background-color 或渐变不会打印

字体怎么嵌入才确保打印不变成宋体

本地没装的字体（比如“华文行楷”“方正小标宋”）在别人电脑上必然回退，必须用 @font-face 加载 Web 字体或转为 Base64。

• 优先选免费可商用字体，如 Noto Serif SC（Google Fonts）、Ma Shan Zheng（思源系列）
• 用 @font-face 引入时，src 必须含 format('woff2')，且放在 CSS 最前面
• 慎用系统字体栈如 "STXingkai", "KaiTi", serif——Windows 和 macOS 渲染差异大，Mac 上根本无 STXingkai
• 标题字号建议 ≥ 28px，正文 ≥ 16px；太小的字打印后发虚

如何让“获奖人姓名”动态替换又不破坏排版

静态模板每次改名都要手动编辑 HTML，容易错位；用 JS 替换最简单，但得防打印时 JS 未执行完就触发打印。

立即学习“前端免费学习笔记（深入）”；

• 把姓名用带 ID 的 <span id="winner-name"></span> 包裹，JS 用 document.getElementById('winner-name').textContent = '张三';
• 替换后加 window.print() 前，先用 setTimeout 延迟 100ms，确保 DOM 重绘完成
• 别用 innerHTML 插入带标签的内容，防止 XSS；纯文本用 textContent
• 如果批量生成，建议服务端渲染（如 Node.js 模板或 Python + Jinja），避免前端 JS 替换不稳定

真正难的不是写出来，是让不同浏览器、不同打印机、不同操作系统下都印出一致效果。测试阶段一定要真机打印，不能只信预览——Chrome 的「另存为 PDF」和「实际打印机输出」有时差一行位置。