- URL: https://piccalil.li/blog/printing-the-web-making-webpages-look-good-on-paper/
- Added At: 2026-07-26 07:11:21
- Tags: #read #frontend #css
打印样式常被忽视，却是无障碍与全流程体验的关键。本文介绍媒体查询打印、分页控制、链接显示与墨水优化等技巧，指出打印设计能反哺屏幕体验。
网页的响应式设计不仅局限于适应屏幕尺寸，还应该考虑适应不同的媒介，尤其是打印。很多人会打印网页，但打印样式表常常被忽视，导致用户体验不佳。这篇文章系统性地介绍了如何让网页在纸张上呈现得清晰、美观。
为什么要重视打印样式 文章列举了几个重要原因：首先是无障碍需求，有些用户无法长时间盯着屏幕，或者单纯偏好纸质阅读。其次，在旅行或没有网络时，纸质副本可能是唯一选择。某些组织或法律规定必须保留硬拷贝内容。此外，了解打印样式也便于学习制作 EPUB 等电子书格式。对开发者而言，做好打印优化不仅能提升打印体验，往往还能反哺屏幕端的体验。
如何应用打印样式
可以通过 <link media="print"> 引入独立的样式表，或者在 CSS 中使用 @media print { } 媒体查询，甚至用 @import url(...) print 导入。所有写在这些区块内的规则，只在打印或打印预览时生效。
测试打印样式 各大浏览器开发者工具都支持模拟打印介质：Edge、Chrome 有清晰指引，Firefox 和 Safari 也提供“强制打印媒体样式”按钮，Polypane 则直接提供了更直观的选项。但需注意模拟环境不一定会禁用背景，而真实打印时浏览器默认不打印背景图，因此设计时不应依赖背景色来传递关键信息。打印场景下还可以使用厘米（cm）、毫米（mm）、英寸（in）、磅（pt）等物理单位，它们在实际纸张上比像素更可靠。
页面布局控制
@page 规则能定义页面尺寸（如 A4、letter）、边距和方向。多数打印机无法满版打印，且浏览器会在默认边距内自动加上日期、页码等头尾信息。分页方面，break-after、break-before、break-inside（取代了旧有的 page-break-* 属性）可以精准控制内容在何处分页，避免在不恰当的位置断开。orphans 和 widows 属性用来设定段落跨页时保留的最少行数，防止单行孤悬。对于跨页元素，box-decoration-break: clone 能让边框等装饰更自然。
适应非交互介质
纸张无法点击或悬停，因此需要把一些隐藏信息显式出来。比如用 a[href]:after { content: " (" attr(href) ")"; } 将链接地址打印在链接后面；同样可为 <abbr> 的 title 属性补上全称。表单在纸上必须保证可直接填写，标签不能依赖鼠标交互而隐藏，含滚动条的区域宜设为 overflow: visible。导航栏、侧边栏、页脚等非核心内容通常用 display: none 隐藏，仅保留 <main> 内的主体。
颜色与墨水友好
多数用户用黑白打印，且彩印成本高，因此需要检查黑白模式下的对比度与可读性。可以移除无关的大图或广告（在版权允许的情况下）。确保网站拥有一个适合打印的亮色主题。用边框替代彩色背景块来区隔内容，既节约墨水又能在灰度下保持清晰。属性 print-color-adjust 可以强制保留或让浏览器自动优化元素的颜色打印，但默认的“经济”模式通常就够了。
总结 印刷样式表并非过时技术，而是构建完整用户体验的关键一环。像重视响应式设计一样重视打印，能在不同媒介下都给予用户尊重和便利，并常能带来屏幕端体验的连带改进。一篇排版考究的打印页，体现着对用户全流程需求的承诺。