打印时文字变黑或颜色丢失的主因是浏览器在@media print下默认禁用颜色样式以省墨，需用!important显式覆盖color和background-color，并避免currentColor、RGBA等不兼容值。
打印时文字变黑或颜色丢失的常见原因
浏览器默认在 @media print 下会禁用大部分颜色样式，尤其是背景色和非黑色文字——这是为了节省墨水，但常导致关键信息（如红色警告、蓝色链接）在打印稿中不可见。不是 CSS 写错了，而是浏览器主动“帮你省墨”，且多数用户没意识到这个默认行为。
必须显式覆盖 color 和 background-color
仅写 color: red 在打印媒体中大概率无效，因为浏览器可能强制重置为黑色。需同时声明：
@media print {
* {
color: #000 !important;
background-color: transparent !important;
}
.warning {
color: #d32f2f !important;
background-color: #fffde7 !important;
}
a {
color: #1976d2 !important;
text-decoration: underline !important;
}
}
-
!important是必要的，用于压倒浏览器内置打印样式表的强制重置 - 不要依赖继承：
* { color: ... }能兜底，但更推荐对关键类（如.warning、.highlight）单独定义 -
background-color必须显式设为transparent或具体色值，否则可能被强制转为白色而遮盖文字
避免使用 currentColor 或 HSLA/RGBA 颜色值
部分旧版浏览器（如 IE11、早期 Edge）在打印媒体中解析 currentColor 不稳定，RGBA/HSLA 也可能降级为透明或黑色。稳妥做法：
- 全部用十六进制（
#333）或 RGB（rgb(51, 51, 51)） - 慎用
hsl(0, 0%, 20%)——看似等价，但某些打印预览中会意外转成灰色块 - 链接伪类（
a:visited）在打印时基本无效，不要依赖它改变颜色
测试打印效果不能只靠「浏览器打印预览」
Chrome 的「打印预览」和真实打印机输出存在差异，尤其涉及背景启用开关、PDF 导出设置：
- Chrome 设置里要勾选「背景图形」（否则
background-color仍不显示） - 导出 PDF 后务必用 Adobe Acrobat 打开再检查——它对 CSS 打印规则兼容性更严格
- 真实激光打印机可能把浅灰（如
#eee）印成全黑，建议最小对比度不低于#333
最易被忽略的是：很多 CMS 或框架（如 WordPress 主题、React 组件库）自带的打印样式表会覆盖你的规则，得用浏览器开发者工具的「Styles」面板确认最终生效的是哪条 color 声明。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
