浏览器默认不打印字体颜色因“背景图形和颜色”关闭；2. 使用@media print定义color、配合color-adjust: exact和!important确保颜色输出；3. 提示用户启用“打印背景颜色”并提供高对比度备选方案。
在网页打印时，CSS 中通过 color 属性设置的字体颜色默认可能不会显示，这是因为大多数浏览器的打印设置默认启用了“背景图形和颜色”关闭选项，导致颜色被忽略以节省墨水。要确保字体颜色在打印中正常显示，需要主动配置 CSS 打印样式。
启用打印中的字体颜色
使用 color 属性本身是正确的做法，但需确保打印媒体查询中明确声明，并建议用户在打印预览中开启“打印背景颜色”选项。可通过以下方式优化：
- 在 CSS 中为打印媒体（@media print）单独定义颜色样式
- 避免依赖背景色传达关键信息，优先使用文字颜色
- 提醒用户在打印设置中勾选“背景图形”或“打印背景颜色”
示例代码：
@media print {
body,
p,
h1,
h2,
h3,
span,
a {
color: #000000 !important; /* 强制设为黑色，确保可见 */
-webkit-print-color-adjust: exact;
color-adjust: exact;
}
}
使用 color-adjust 精确控制打印颜色
现代浏览器支持 color-adjust 和 -webkit-print-color-adjust 属性，用于告诉浏览器在打印时保留原始颜色。
- color-adjust: exact 表示禁止浏览器自动调整颜色
- 配合 !important 可提升优先级，防止被覆盖
- 适用于发票、表格、标签等需要精确颜色输出的场景
实际建议与注意事项
虽然可通过 CSS 强制启用颜色打印，但最终效果仍受用户浏览器设置影响。推荐策略：
- 重要内容不依赖颜色传达（如仅用红色表示错误）
- 为打印样式提供高对比度的黑白方案作为备选
- 在页面明显位置提示“如需彩色打印，请在打印设置中启用背景颜色”
基本上就这些，合理使用 color 配合打印媒体查询和 color-adjust 属性，可以有效提升打印时的字体颜色显示效果。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
