本文详解在 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）：
立即学习“前端免费学习笔记（深入）”；
<!DOCTYPE html>
<html>
<head>
<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>
</head>
<body>
<h1>PDF with Custom Font ✅</h1>
<p>This text renders in Gloria Hallelujah — no network requests needed.</p>
</body>
</html>? 关键要点说明：
-
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 文件。
? 进阶提示： 若需多字体或图标字体（如 Font Awesome），可按相同方式嵌入多个 @font-face 规则；对于中文等大字符集字体，建议提前子集化（如使用 fonttools）以控制 Base64 字符串长度（GAS 模板变量有约 10MB 内存限制）。
遵循以上结构与格式，即可稳定实现在 GAS 生成的 PDF 中渲染任意自定义字体。
