首先确保CSS中使用color属性明确设置文字颜色，并通过@media print定义打印样式；接着添加-webkit-print-color-adjust: exact和color-adjust: exact强制保留颜色；最后提醒用户在打印预览中开启“背景图形”选项以启用彩色打印，避免因灰度模式导致颜色丢失。
在网页打印时，有时会发现CSS中设置的文字颜色没有正确显示在打印预览或实际打印结果中，尤其是在Chrome等浏览器中，默认情况下为了节省墨水，会忽略背景色和部分文字颜色。解决这个问题的关键是确保使用 color 属性正确指定文字颜色，并通过打印媒体查询优化输出。
启用彩色打印样式
浏览器默认可能以“灰度”模式打印，导致颜色丢失。即使你在CSS中使用了 color 设置文字颜色，也需要确保打印设置允许彩色输出：
- 在打印预览中检查是否勾选了“背景图形”或“彩色打印”选项（Chrome中为“背景图形”）
- 提醒用户在打印对话框中开启对应选项
使用 @media print 强制定义打印颜色
通过专门的打印样式表规则，确保文字颜色在打印时保留：
@media print {
body,
p,
h1,
h2,
h3,
span,
div {
color: black !important; /* 或你需要的颜色 */
-webkit-print-color-adjust: exact;
color-adjust: exact;
}
}
color-adjust: exact 和 -webkit-print-color-adjust: exact 是关键属性，它们告诉浏览器在打印时保留原始颜色，而不是自动转换为灰度。
立即学习“前端免费学习笔记（深入）”；
确保元素可被打印
- 避免使用
opacity: 0或visibility: hidden等隐藏文本，这些会导致内容不打印 - 不要将文字颜色设为与背景相同（如白底黑字却用白色文字）
- 尽量使用明确的颜色值，例如
color: #000、color: black，避免依赖主题变量未解析的情况
基本上就这些。只要在CSS中使用 color 明确指定文字颜色，并配合 @media print 和 color-adjust: exact，就能有效防止打印时文字颜色丢失。不复杂但容易忽略。
