网站应该能打印：一份 @media print 样式表的完整示范
来源：brennenputh.me — 2026-10-24
📋 概述
作者习惯读纸质文档——用笔标注比在笔记本上读更投入，所以他决定让自己的博客在打印时也像样。他先试了直接 Ctrl-P，结果字号大两级、页眉难看、黑白打印下链接全是灰的。修法是一段 @media print 规则：用 .noPrint 隐藏不该出现的元素（导航、广告），用 .onlyPrint 只在纸上显示（作者署名），把正文压到 12pt、各级标题 12—16pt，链接强制黑色并加边框，代码块加实线框。文章强调这套东西本来就是 CSS 的正统用途，只是被单页应用和深色主题丢掉了。
🔑 核心要点
- 问题清单很具体：字号偏大两级、页眉在纸上难看、链接的黑白对比度不足。
- 两个类就够分工：.noPrint 隐藏导航与广告，.onlyPrint 只给打印稿加署名。
- 排版规则明确：正文 12pt，h3/h4 13pt、h2 14pt、h1 16pt，链接强制黑色并加边框。
- 作者的立场是这属于 CSS 的正统能力，不是怀旧——纸面阅读与标注仍然更有效。
💡 金句
I read a lot of printed papers these days. While I enjoy reading on a laptop as much as the next guy, marking up a printed document engages me better.
👍 0
👎 0
← 返回 Hacker News 首页