
font awesome 图标在网页正常显示,但在 chrome 打印(含 pdf 导出)时消失,根本原因在于 web font 渲染机制在打印媒体中受限;改用 svg+js 方式集成可彻底解决该问题。
Chrome(及其他基于 Chromium 的浏览器)在打印预览或生成 PDF 时,对 @font-face 加载的图标字体支持不稳定——即使 CSS 中已显式设置 @media print { display: block; visibility: visible; },字体文件仍可能被忽略、延迟加载或因跨域/本地路径权限问题无法渲染。而 SVG+JS 方案将图标以内联
✅ 推荐解决方案:迁移到 SVG+JS 集成方式
替换原有的 CSS 字体引入方式:
改为使用官方推荐的 SVG+JS 方式(需确保本地路径正确):
⚠️ 关键注意事项:
- 确保所有 .js 文件路径可被浏览器直接访问(建议通过开发者工具 Network 标签页验证 fontawesome.min.js 等资源状态码为 200);
- 不要混用 CSS 和 JS 方式,否则可能引发图标重复、冲突或未定义行为;
- 若使用自定义图标集,需同步引入对应 regular.min.js 或 light.min.js(如适用);
- 打印前建议强制触发一次图标渲染(例如:window.print() 前稍作延迟或调用 fa.dom.i2svg()),但通常 defer 脚本已足够可靠。
? 补充说明:
SVG+JS 方式不仅解决打印问题,还带来额外优势:更好的可访问性(自动添加











