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 方式(需确保本地路径正确):
⚠️ 关键注意事项:
? 补充说明:
SVG+JS 方式不仅解决打印问题,还带来额外优势:更好的可访问性(自动添加