网页本该可以打印:给站点补一份打印样式表
来源:brennenputh.me — 2026-10-24
📋 概述
作者习惯把论文打印出来边读边标注,于是回头检查自己的站点打印出来是什么样:字号大两级、页眉一塌糊涂、链接在黑白打印里变成灰块。他补了一套 @media print 规则——用 .noPrint 隐藏页眉、.onlyPrint 只让打印版本显示作者署名、按 12pt 到 16pt 重建标题字号体系、代码块加黑框、链接统一改成黑色。代价是小半天时间,收益是任何纯文字站点都能让读者用自己偏好的媒介来读。
🔑 核心要点
- 打印样式只需要一段 @media print:.noPrint 隐藏页眉,.onlyPrint 让作者署名只在纸上出现
- 响应式缩放的字号打到纸上会大两级,必须重设——正文 12pt、h2 14pt、h1 16pt 才像一份文档
- 蓝色链接在屏幕上漂亮,打印成灰度就是灰块,所以 @media print 里直接把 a 改成 color: black !important
- 最难处理的是代码块:既想整块不跨页、又想跨页时保留边框,作者坦言自己也没解决,只是加了个黑框
- 论证很朴素——如果你的站点内容只有文字,让人用喜欢的媒介读它的成本很低,收益却是实打实的
💡 金句
The road to good software is paved with kindnesses from software engineers to their users.
👍 0
👎 0
← 返回 Lobsters 首页