Django中wkhtmltopdf生成PDF时@font-face意外影响<pre>标签样式

可能的原因 #

1. wkhtmltopdf字体解析逻辑干扰：wkhtmltopdf在处理自定义@font-face时，会改变默认的字体 fallback 优先级。即便你设置了全局字体，<pre>标签默认的等宽字体（如Courier New）可能被替换成非等宽的 fallback 字体（比如sans-serif），导致字符间距、对齐方式异常，表现为样式改变。
2. 自定义字体加载失败的连锁影响：如果USPS_IMB_Standard字体加载失败（比如路径错误、文件损坏），wkhtmltopdf的字体 fallback 机制会出现异常，进而干扰到未关联该字体的元素（包括<pre>），破坏原本的全局字体设置。

解决方案 #

• 显式指定<pre>的字体：给<pre>标签单独设置font-family，强制使用等宽字体或你定义的全局字体，覆盖被干扰的 fallback 逻辑：

pre {
  font-family: 'Courier New', Courier, monospace, 你的全局字体名称;
}

也可以直接在<pre>的内联样式里补充：

<pre style="padding: 10px 5px; font-size: 12px; font-family: 'Courier New', Courier, monospace;">
  {{statement.statement_data}}
</pre>

• 验证字体路径与可用性：确保{{ usps_font }}生成的路径正确，wkhtmltopdf能访问到字体文件。建议用Django的static模板标签生成绝对路径：

src: url("{% static 'fonts/USPS_IMB_Standard.ttf' %}") format('truetype');

同时检查字体文件是否完整，确认wkhtmltopdf支持该字体格式（TrueType是兼容的，但需注意你的wkhtmltopdf版本）。

• 隔离自定义字体作用域：将自定义字体的样式限制在仅需要的元素范围内，比如给包含imb_code的元素添加父容器，仅在该容器内应用字体规则：

.imb-container @font-face {
  font-family: 'USPS_IMB_Standard';
  src: url("{% static 'fonts/USPS_IMB_Standard.ttf' %}") format('truetype');
}
.imb-container .usps-barcode {
  font-family: 'USPS_IMB_Standard', sans-serif;
}

• 调整wkhtmltopdf渲染参数：添加以下参数优化字体加载与渲染：
  • --enable-local-file-access：确保wkhtmltopdf能读取本地静态文件（包括字体）
  • --dpi 300：提高渲染精度，减少字体渲染异常
  • --no-stop-slow-scripts：避免因脚本执行问题中断字体加载

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