网页打印不再乱，实用样式指南与快捷键速查
《网页打印不再乱》是一份实用指南，聚焦解决网页打印时常见的排版混乱、内容缺失等问题，指南介绍了通过CSS打印样式优化页面结构、隐藏导航和广告等非核心元素、调整字体与分页规则等方法，并补充网页打印快捷键操作，帮助用户快速预览和打印，内容简洁实用，适合需要将网页输出为纸质文档或PDF的普通用户及前端开发者参考。
很多网页在屏幕上看起来非常漂亮,但一点击“打印”，结果却常常让人崩溃：导航栏、广告、侧边栏全部堆在纸上，正文被挤成窄窄一条；背景色消失，图片错位；链接变成一串串难看的网址，网页打印并不是无法控制的事情，只要掌握一些 CSS 打印样式技巧，就能让网页打印效果脱胎换骨。
为什么网页打印需要专门优化
网页设计与纸张打印有着根本区别,屏幕显示追求交互、色彩和滚动浏览，而打印输出更强调线性阅读、清晰排版和内容完整性，如果直接把屏幕样式用于网页打印，就会出现以下问题：
- 导航栏、按钮、广告等无关内容占用大量纸张空间，被多栏布局挤压，阅读体验极差。
- 深色背景或彩色背景在打印时被浏览器默认丢弃。
- 链接无法体现实际网址,失去信息价值，在分页处被随意截断，图表或段落被切开。
针对网页打印进行专门优化,是提升用户体验的重要一步。
用 @media print 定制打印样式
CSS 提供了专门的打印媒体查询，可以让我们在网页打印时应用不同的样式规则，基本语法如下：
@media print { / 打印时生效的样式 / }
通过这个媒体查询,我们可以隐藏不需要打印的元素，调整布局，让页面更适合纸张输出。
@media print { header, nav, .sidebar, .ad, button { display: none; } main { width: 100%; } }
这样,网页打印时就会自动隐藏页头导航、侧边栏、广告和按钮，只保留主要内容区域。
隐藏不必要的内容
网页中常见的非打印元素包括：顶部导航栏、侧边栏、搜索框、按钮、广告位、弹窗、评论表单等，这些元素在屏幕上可能很有用，但在网页打印时只会浪费纸张和油墨。
可以直接使用 display: none 隐藏它们，需要注意的是，应尽量通过类名或标签选择器批量处理，而不是针对具体某个页面元素单独写规则，这样更利于维护。
合理控制分页
分页是网页打印中最容易出现问题的环节,浏览器默认会在内容流中自动分页，但分页位置往往不理想，CSS 提供了几个分页控制属性：
- page-break-before: always; 在元素前强制分页。
- page-break-after: always; 在元素后强制分页。
- page-break-inside: avoid; 避免元素内部被分页切断。
对于表格、图片、代码块等内容，可以设置：
@media print { table, img, pre, blockquote { page-break-inside: avoid; } h2, h3 { page-break-after: avoid; } }
这样就能有效避免标题单独留在页尾,或者表格被拦腰截断的尴尬情况。
处理颜色与背景
默认情况下,浏览器在网页打印时通常会忽略背景色和背景图片，以节省油墨，但有时候背景色是信息的一部分，比如图表、色块标记等，如果确实需要保留背景色，可以使用 print-color-adjust 属性：
@media print { .highlight { -webkit-print-color-adjust: exact; print-color-adjust: exact; } }
从节约墨粉和可读性角度出发,大多数情况下建议在打印样式中使用白底黑字，并适当增强文字对比度，可以给正文设置黑色文字，给链接设置下划线或不同颜色，以确保信息不丢失。
让链接可读
网页中的链接在打印后无法点击,用户自然也就不知道链接指向哪里，为了让链接在网页打印中仍有信息价值，可以利用 CSS 自动显示链接地址：
@media print { a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 90%; color: #555; } }
这段代码会在每一个以 http 开头的外部链接后面显示其网址，对于内部锚点链接或空链接，则可以跳过，避免打印出无意义的 # 号。
调整字体与页面设置
屏幕显示常用像素、em 等单位，而印刷排版更习惯使用磅、毫米等单位，在网页打印样式中，可以适当调整字号和行高，让阅读更舒适：
@media print { body { font-size: 12pt; line-height: 1.5; } }
还可以通过 @page 规则设置页面边距和纸张大小：
@page { size: A4; margin: 15mm; }
这样可以统一网页打印时的页面尺寸和留白,让输出效果更加规范。
调试网页打印效果
调试网页打印样式不必每次都真的打印出来,现代浏览器都提供了打印预览功能，可以作为第一轮检查，更高效的方法是使用开发者工具模拟打印媒体。
以 Chrome 为例，打开开发者工具后，在“渲染”面板中选择“模拟 CSS 媒体类型”为“print”，页面就会按照打印样式显示，这样就能快速检查布局、隐藏元素和分页效果是否达到预期。
网页打印并非只能接受浏览器默认的混乱效果,通过 @media print 定制打印样式，隐藏无关元素，控制分页与颜色，优化字体和链接显示，再配合打印预览调试，完全可以实现干净、专业的打印输出。
下次当你开发或维护网页时,不妨专门花一点时间处理网页打印样式，这不仅是对用户阅读体验的负责，也会让网页在纸张上展现出同样良好的品质。
