网页本来就该能打印，他自己补了一份 @media print 样式

最近我读了不少打印出来的论文。虽然我也喜欢在笔记本电脑上阅读，但拿着打印稿做标注更能让我投入。而且，坐在白板前、手边放着一份打印文档，确实会让我觉得自己在做一件正经事。所以我一直在琢磨，怎样才能让别人也能以这种形式享受我写的内容。

幸运的是，打印文档曾经是网页设计的一大重点。你可以打印任何网页，按下 CTRL-P，然后祈祷你的打印机驱动今天愿意配合。 我在自己的网页上试了一下，天真地以为不费什么力气就能得到一份像样的打印稿。

效果不太好，虽然至少所有内容都能看到。文字大约大了两个级别，页眉打印出来很难看，我的链接在黑白打印下灰得刺眼。完全不能接受。

让页面适合打印

2026-10-26 更新： 我觉得有必要说明一下，由于收到了来自 lobste.rs 和 HN 上读者关于我遗漏的明显问题的反馈，这部分已经几乎完全改掉了。我正在尽可能简化我的样式表。谢谢！

幸运的是，网页社区此前已经关注过从 HTML 页面打印文档这件事。CSS 有专门针对打印内容设置样式的选择器，而且确实有用。下面是这个页面目前与打印相关的代码片段：

.onlyPrint {
  display: none;
}

@media print {
  .noPrint {
    display: none;
  }

  .onlyPrint {
    display: inline;
  }

  p,
  ol {
    font-size: 12pt;
  }

  h3, h4 {
    font-size: 13pt;
  }

  h2 {
    font-size: 14pt;
  }

  h1 {
    font-size: 16pt;
  }

  .giallo {
    border: 3px solid black;
  }

  .giallo-l {
    font-size: 11pt;
  }

  a {
    color: black !important;
  }
}

按下 CTRL-P 或点击本页的打印按钮，就能看到这段代码的效果。它为我做了以下几件事，按顺序说明：

1. onlyPrint 可以作为一个 class 添加，让元素只在打印文档中显示。目前，这意味着给副标题加上一小段作者署名。
2. noPrint 用于把某些内容从打印版网站中移除。我把它加在页眉上，因为页眉打印出来实在很难看。
3. 为打印调整字号非常重要。我网站上使用的可变缩放文字打印到纸上很难看。12pt 是相当被广泛接受的尺寸，我觉得够用了。标题稍微大一点也合理。
4. giallo 的调整是针对代码块的。说实话，即使做了一些调整，代码块仍然是最丑的部分。它们总想作为一个整体输出，不肯在页面边界处断开，如果有人有解决办法，我会非常感激。
5. 蓝色链接虽然在网站上我很喜欢，但在灰度打印下很难看。把它们改成和其他文字相同的颜色就可以了。 CSS 里任何你喜欢的代码都可以随意取用，我并不吝惜。我个人很希望看到更多网页认真考虑打印效果。

为什么要做这件事

按这个思路优化完自己的网站之后，我挺理解那些不把打印当回事的人。该藏的藏、该露的露，把打印样式调好，花掉了我一上午相当一部分时间。我的网站并不复杂。我也怀疑到底有多少人会经常把网页打印出来。说不定就我一个。

不过，如果你的网站内容全是文字，那让人们用自己喜欢的媒介去读这些文字，总归不是坏事。数字媒介本身已经提供了很大的灵活性。好软件的路，是软件工程师对用户一点一滴的善意铺出来的。也许有一天，某个人会碰上这份善意，然后笑一下，哪怕只有短短一瞬。那也值了。

---

2026-10-26 补充： 一位朋友告诉我，我提交之后，这篇文章上了 HN 和 lobste.rs 的首页。挺好玩！现在我被告知 CSS 里有好几处毛病，尽管如此，我还是希望这篇文章至少能让一些人更认真地考虑一下这个媒介。谢谢各位阅读！