CSS打印样式设置：link引入print.css方法

CSS打印样式失效的根源往往在于media属性错误（必须严格写为media="print"），而浏览器默认禁用背景色、颜色等以节省耗材，需通过color-adjust: exact系列声明强制覆盖；推荐使用pt等绝对单位替代rem/em以避免DPI换算偏差，禁用Web字体并慎用@import，同时利用@media print精准控制显示/隐藏内容、分页行为及页眉页脚，但务必在真实打印机上校验效果——因为打印预览无法完全模拟物理输出的真实表现。

print.css 文件为什么没生效

常见现象是页面打印时样式还是浏览器默认的，print.css 里写的规则完全不触发。根本原因几乎都是 media 属性写错了——不是写成 media="print"，而是误写成 media="screen"、漏写、或拼成 media="prnt" 这类低级错误。

正确引入方式只有一种：

<link rel="stylesheet" href="print.css" media="print">

• media 值必须严格为 print，大小写敏感
• 不要用 @import 在普通 CSS 里导入 print 样式，它不被所有浏览器的打印上下文支持
• Chrome 和 Edge 的「打印预览」会实时反映 media="print" 的效果，但 Safari 有时缓存旧规则，可强制 Cmd+R 刷新预览窗口

打印时字体、颜色、背景全消失了

这不是 bug，是浏览器默认行为：出于节省墨水和纸张的考虑，绝大多数浏览器（Chrome/Firefox/Safari）默认禁用背景色、背景图和非黑文字色。你写了 color: #007bff 或 background: #f0f0f0，打印预览里照样是黑字白底。

解决方法只有显式覆盖这些默认限制：

@media print {<br>  * {<br>    color-adjust: exact !important;<br>    -webkit-print-color-adjust: exact !important;<br>    print-color-adjust: exact !important;<br>  }<br>}

• 仅加 !important 不够，必须配 color-adjust: exact 系列声明
• 字体大小建议用 pt（如 12pt）而非 px 或 rem，避免 DPI 换算偏差
• 避免使用 Web 字体（如 @font-face），打印机环境通常不支持，会回退到系统默认字体

怎么让某些内容只在打印时出现（比如页眉页脚）

用 @media print 内联样式控制显示/隐藏最直接，但要注意：不能依赖 JavaScript 动态插入，因为打印快照是静态的，JS 已停止执行。

推荐做法是提前在 HTML 里写好打印专用区块，并用 CSS 控制：

<div class="print-only">本页共 3 页｜生成时间：2024-06-15</div><br><div class="screen-only">编辑按钮｜操作栏</div>

@media print {<br>  .screen-only { display: none; }<br>  .print-only { display: block; }<br>}

• 不要用 visibility: hidden 替代 display: none，前者仍占位，可能导致空白页
• 页码可用 @page 规则实现，但仅限简单计数：@page { @top-center { content: "第 " counter(page) " 页"; } }，注意 Firefox 不支持 @top-center
• 如果要精确控制分页（比如不让表格跨页断裂），加 page-break-inside: avoid 到 table 或 section 上

print.css 里用 rem/em 单位会出问题吗

会，而且很隐蔽。打印上下文的根字体大小（html 的 font-size）不一定等于屏幕下的值，尤其当用户调整了系统缩放或浏览器默认字号时，rem 计算结果会偏移，导致布局错乱或文字过小。

打印样式应尽量回归基础单位：pt（点）、in（英寸）、cm 或绝对 px（在打印 DPI 固定时相对稳定）。例如：font-size: 12pt 比 font-size: 0.75rem 可靠得多。

• 1pt = 1/72in，是印刷业标准单位，浏览器打印引擎对其支持最一致
• 行高建议用无单位数值（如 line-height: 1.4），避免 line-height: 1.4em 嵌套放大
• 边距/内边距优先用 mm 或 cm，比如 margin: 1cm 比 margin: 20px 更符合实际纸张留白需求

打印样式不是屏幕样式的子集，它是另一套物理输出逻辑。最容易被忽略的是：你测试时看的是「预览」，但真实打印机的 DPI、纸张尺寸、甚至驱动设置，都可能让 print.css 表现和预期不一致——务必用真机打一份出来校验。

今天关于《CSS打印样式设置：link引入print.css方法》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注golang学习网公众号！