wkhtmltopdf 0.12.4自定义字体字符破损及SVG字体转图片问题求助

Hey，针对你遇到的wkhtmltopdf转换带自定义字体的HTML时，部分字符破损、SVG字体显示正常但被转成图片的问题，我结合实际踩坑经验给你几个可行的方案：

先回顾下你的环境和已尝试操作：

• 工具版本：wkhtmltopdf 0.12.4
• 系统：CentOS 6.9
• 已尝试：base64编码字体、系统安装字体、测试旧版本（0.9/0.10）

方案1：优化SVG字体引用，尽量避免被转成图片 #

wkhtmltopdf基于QtWebKit，对SVG字体的处理确实容易触发 rasterize（转成图片），但可以通过调整@font-face的声明来尝试改善：

@font-face {
  font-family: 'camelot';
  /* 把SVG字体放在最优先位置 */
  src: url('gbcamweba-webfont.svg#camelotregular') format('svg'),
       url('gbcamweba-webfont.woff') format('woff'),
       url('gbcamweba-webfont.ttf') format('truetype'),
       url('gbcamweba-webfont.eot');
  src: url('gbcamweba-webfont.eot?#iefix') format('embedded-opentype');
  font-weight: normal;
  font-style: normal;
  /* 强制字体加载策略，避免降级渲染 */
  font-display: swap;
}

⚠️ 重点：一定要确认SVG字体文件内部的<font>标签id和你引用的#camelotregular完全一致，很多时候是ID不匹配导致渲染异常，甚至触发转图片的逻辑。

不过说实话，这个方案只能降低转图片的概率，没法100%避免——因为QtWebKit对SVG字体的渲染机制本身就容易 rasterize，更推荐下面的方案。

方案2：修复TTF/WOFF字体的渲染问题（优先推荐） #

既然SVG字体有转图片的隐患，不如优先解决TTF/WOFF字体的字符破损问题：

1. 检查字体文件完整性：有时候下载或生成的webfont可能存在损坏，建议用专业工具重新生成标准的webfont包，确保TTF/WOFF文件没有缺失字形。
2. 强制字体渲染规则：给使用该字体的元素添加专属CSS，避免系统字体 fallback：

/* 替换成你实际的文本元素选择器 */
.bill-text {
  font-family: 'camelot', sans-serif !important;
  /* 修复跨平台字体平滑的兼容问题 */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

3. 系统安装字体的正确姿势：在CentOS安装字体后，一定要执行fc-cache -fv命令更新字体缓存，然后重启你的应用服务，确保wkhtmltopdf能识别到新安装的字体。

方案3：升级wkhtmltopdf版本（注意系统兼容性） #

0.12.4版本确实存在不少字体渲染的bug，你可以尝试升级到0.12.6（这是相对稳定的版本），新版本对webfont的支持更完善，尤其是WOFF格式的处理。不过CentOS 6.9比较老旧，可能需要编译安装或者找适配的rpm包。

方案4：正确使用base64编码字体 #

如果你之前用base64编码字体没成功，可能是格式不对：

• 优先选择WOFF格式的字体进行base64编码，QtWebKit对WOFF的支持比TTF更稳定
• 编码后的字符串不能有换行，要保持完整的一行
• 示例代码：

@font-face {
  font-family: 'camelot';
  src: url(data:application/font-woff;base64,【你的WOFF字体base64编码内容】) format('woff');
  font-weight: normal;
  font-style: normal;
}

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