Pagedjs渲染PDF更换自定义字体后文本无法选中问题排查

这个问题的核心原因是打印流程触发时自定义字体未完成全量加载，浏览器无法将字体子集嵌入PDF，直接把文本渲染为不可选中的矢量路径，入门套件默认没有做字体加载前置校验，高级示例是隐式实现了字体加载等待逻辑才正常工作，和字体来源（在线/本地）没有直接关联，按下面步骤逐一排查修复即可：

1. 优先修复字体加载时序（覆盖90%场景） #

pagedjs的分页渲染必须在所有字体加载完成后再启动，否则分页尺寸计算、打印嵌入都会出问题：

• 移除CSS文件中用@import引入在线字体的写法，把字体相关的样式声明、资源引用放到HTML<head>的最顶部，优先加载
• 在pagedjs初始化逻辑前，加全局字体加载完成的等待判断，代码示例：

// 等所有声明的字体全部解析加载完成，再启动pagedjs渲染
document.fonts.ready.then(() => {
  // 替换成你项目里原本的pagedjs初始化逻辑
  const previewer = new Paged.Previewer();
  previewer.preview("/content.html", "/styles.css");
});

• 如果用Google Fonts，把引入链接里的display=swap参数改成display=block，swap模式先渲染 fallback 字体再替换的逻辑，会导致pagedjs拿到错误的文本宽度做分页，打印时也容易触发文本转路径的问题。

2. 本地@font-face配置规范 #

如果用本地字体文件，按以下规则写配置，避免加载异常：

/* 每个字重、字形单独对应一个字体文件，不要用单文件适配所有字重 */
@font-face {
  font-family: 'Montserrat';
  src: url('/fonts/Montserrat/Montserrat-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: block; /* 强制禁止字体 fallback 替换 */
}
/* 其余字重、斜体样式参照上面的格式逐一补全 */

• 字体资源路径统一用站点根路径开头（比如/fonts/xxx.ttf），不要用./fonts这类相对路径，避免打印时上下文路径变化导致字体加载失败
• 提前校验本地字体文件完整性，不要用损坏、被混淆加密的字体文件，确认字体本身可被系统正常识别。

3. 浏览器打印设置修正 #

触发打印导出时，先检查打印配置项：

• 打开「更多设置」，确认没有勾选「作为图像打印」选项，该选项会直接把整个页面转成位图，自然无法选中文本
• 勾选「包含背景图形」，关闭「简化页面」类的优化选项
• 如果使用Chrome/Edge浏览器，进入浏览器实验项页面，找到Print font subset loading选项设为Disabled后重启浏览器，该默认开启的实验项会导致打印时字体子集加载不全，强制把文本转成矢量路径。

验证方式 #

配置完成后，在浏览器控制台执行document.fonts.check("16px Montserrat")，返回true后再触发打印导出，导出的PDF文本即可正常选中、复制。

内容的提问来源于stack exchange，提问作者Null Salad