如何在 HTML 转 PDF 过程中正确嵌入自定义字体-html教程-PHP中文网

如何在 HTML 转 PDF 过程中正确嵌入自定义字体

本文详解在 Google Apps Script 中通过 HTML 模板生成 PDF 时嵌入自定义字体的关键方法，重点解决 @font-face 的 Base64 数据 URI 格式错误导致字体失效的问题，并提供可直接运行的完整代码示例与注意事项。

本文详解在 google apps script 中通过 html 模板生成 pdf 时嵌入自定义字体的关键方法，重点解决 `@font-face` 的 base64 数据 uri 格式错误导致字体失效的问题，并提供可直接运行的完整代码示例与注意事项。

在 Google Apps Script（GAS）中使用 HtmlService 渲染 HTML 并通过 getAs(MimeType.PDF) 转换为 PDF 是常见做法，但其底层 PDF 渲染引擎（基于 Chrome 的无头打印）对 CSS 字体加载有严格限制：不支持远程字体请求（如 Google Fonts 链接），也不支持未正确声明协议前缀的内联 Base64 字体。许多开发者尝试用 @font-face 引入本地字体文件的 Base64 编码，却因 URI 格式不规范而失败——核心问题在于遗漏了必需的 data: 协议标识符。

✅ 正确做法是将字体 Blob 编码为标准 Data URL，并在 src 属性中显式以 "data:..." 字符串形式书写。以下是优化后的完整实现：

1. GAS 后端脚本（Code.gs）：

function htmlToPdf() {
  // 替换为你的 .ttf 或 .woff 文件在 Google Drive 中的真实 ID
  const fileIdOfFontFile = "1xXWmKZ2wRzWq_4DWfeIK67QKFVkF_nVu";
  const fontBlob = DriveApp.getFileById(fileIdOfFontFile).getBlob();

  // 构建标准 Data URL：data:[MIME_TYPE];base64,[BASE64_DATA]
  const fontDataUrl = 
    `${fontBlob.getContentType()};base64,${Utilities.base64Encode(fontBlob.getBytes())}`;

  const htmlTemplate = HtmlService.createTemplateFromFile("site");
  htmlTemplate.fontDataUrl = fontDataUrl; // 传递完整 data: URL 字符串

  const pdfHtml = htmlTemplate.evaluate().getContent();
  const pdfBlob = Utilities.newBlob(pdfHtml, MimeType.HTML).getAs(MimeType.PDF);

  DriveApp.createFile(pdfBlob).setName("document_with_custom_font.pdf");
}

2. HTML 模板（site.html）：


  
    <base target="_top"><style>
      @font-face {
        font-family: "Gloria Hallelujah";
        src: url("data:<?= fontDataUrl ?>"); /* ⚠️ 关键：必须包含 "data:" 且整体用双引号包裹 */
        font-weight: normal;
        font-style: normal;
      }
      body, p, h1, h2, h3 {
        font-family: "Gloria Hallelujah", cursive; /* 回退字体确保可读性 */
        margin: 20px;
      }
    </style><h1>PDF with Custom Font ✅</h1>
    <p>This text renders in Gloria Hallelujah — no network requests needed.</p><div class="aritcle_card flexRow artxards">
											<div class="artcardd flexRow">
												<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher"><img
														src="https://img.php.cn/upload/skill/000/000/081/179109368394970.jpg" alt="Wechat HTML Publisher" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
												<div class="aritcle_card_info flexColumn">
													<a rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher" class="overflowclass">Wechat HTML Publisher</a>
													<p class="overflowclass">直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。</p>
												</div>
												<a rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
												</a>
											</div>
										</div>

? 关键要点说明：

url(= fontDataUrl ?>) ❌ 错误：模板变量展开后若不含 data: 前缀（如 font/woff;base64,...），浏览器会误判为相对路径，导致加载失败；
url("data:= fontDataUrl ?>") ✅ 正确：强制声明 Data URL 协议，且外层双引号确保字符串完整性；
推荐使用 .ttf 或 .woff 格式（兼容性优于 .woff2），MIME 类型需准确（如 font/ttf, font/woff）；
始终设置回退字体（如 cursive 或 sans-serif），避免字体加载异常时内容不可读；
GAS 的 PDF 导出不执行 JavaScript，因此所有样式必须内联或通过 <style></style> 定义，不可依赖外部 CSS 文件。