css变量在@media print中基本不可靠，因打印渲染管线跳过cssom变量替换，导致颜色丢失、字号坍缩；仅@page内静态定义等极少数场景可谨慎使用，推荐显式写死值并借助工具链维护。
CSS自定义属性（CSS变量）在@media print中基本不可靠，别用它控制打印样式的关键值。 浏览器打印引擎对var(--color-text)、var(--font-size-base)等解析支持极差，Chrome 128+、Firefox 120+仍会回退到初始值或完全忽略，导致颜色丢失、字号坍缩、单位错乱——这不是配置问题，是渲染层限制。
为什么 CSS 变量在 print 媒体查询里容易失效
打印样式由独立的“打印渲染管线”处理，它跳过 CSSOM 的部分计算阶段，不执行变量替换逻辑。尤其当变量定义在:root外、或被!important干扰、或依赖 JS 动态设置时，@media print块内的var()几乎必然 fallback 到initial或浏览器默认值。
- 字体大小写成
font-size: var(--fs-body, 12pt)→ 实际输出可能是 10px 或继承的 16px，不可控 - 颜色写成
color: var(--text-primary, #000)→ 部分打印机驱动直接丢弃，显示为浅灰 - 背景色
background: var(--bg-surface, transparent)→transparent可能被忽略，深色模式页面印出大块黑底
哪些地方可以安全用 CSS 变量（有限场景）
仅当变量值是纯静态、无计算、且作用域极窄时，可谨慎尝试。例如：
- 在
@media print块内直接定义：:root { --print-margin: 1.5cm; }，再用@page { margin: var(--print-margin); }——@page对变量支持略好于元素样式 - 用于生成伪元素内容：
a::after { content: " (" attr(href) ")"; }这类不依赖变量值的场景，变量仅作注释用途 - 配合
@supports (color: oklch(0% 0 0))做降级判断，但打印环境基本不支持@supports，实际意义极小
替代方案：显式写死 + 工具链辅助维护
与其赌变量兼容性，不如用确定性写法，再靠构建工具保证一致性：
- 正文色统一写
color: #000 !important，别信currentColor或继承链 - 字号强制用
font-size: 12pt（不是12px），pt单位在打印 DPI 下更稳定 - 边距/留白用
@page { margin: 1.2cm; }直写，不要套变量 - 若项目已用 Tailwind，
print:text-black print:bg-transparent这类工具类比print:text-[#000]更可靠——因为它是预编译出的确定 CSS
最常被忽略的是：哪怕你把变量定义得再规范，只要父容器有overflow: hidden或transform，break-inside: avoid就直接失效，而这种失效完全不报错，只能靠真实打印 PDF 逐页验证。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
