用 `@media print` 让网页真正能打印：一套可抄的 CSS 清单

读 PDF、圈画纸稿的人还在。浏览器默认 Ctrl/Cmd+P 往往字号失控、页眉难看、链接发灰。美国开发者 Brennen Puth 在 2026 年 10 月 24 日的博文里，把自家站点调到「打印也能读」，并公开了完整 @media print 片段。下面按他的写法整理成可照做的步骤；文中顺带提到的求职意向不扩写。[1]

准备工作

• 任意现代浏览器；本地或线上 HTML + CSS。

• 核实日期：北京时间 2026 年 10 月 26 日；步骤与选择器以原帖 CSS 为准。[1]

• 打印预览：Ctrl+P / Cmd+P，或系统打印对话框里的「预览」。

操作步骤

1、加「只屏幕」与「只打印」钩子

**做什么：**给页眉、导航等不适合上纸的区块加 class noPrint；需要印在纸上、屏幕上不显示的作者署名等加 onlyPrint。默认让 .onlyPrint { display: none; }，只在打印媒体里打开。[1]

**为什么：**屏幕导航占版面、打印时常变形；纸质页又常缺署名。

**怎么确认：**打印预览里页眉消失、署名出现；屏幕刷新后署名仍隐藏。

2、用 @media print 收紧字号

**做什么：**在样式表加入：

.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;
  }

  a {
    color: black !important;
  }
}

原帖对代码块还有边框与字号微调（.giallo / .giallo-l），可按站点 class 名改写。[1]

**为什么：**响应式 rem/vw 在纸上常显过大；约 12pt 正文字号较常见；链接默认蓝在灰度下发灰，改成黑色更易读。

**怎么确认：**预览中正文约一指宽可读、标题略大、链接不再发蓝发灰。

3、单独收拾代码块分页

**做什么：**打印时给 pre/code 加边框或略缩小字号；原帖承认代码块仍易「整块不跨页」，尚未有完美方案，可继续试 page-break-inside 等，效果因浏览器而异。[1]

**为什么：**等宽块在分页算法里往往被当成不可拆单元。

**怎么确认：**多页预览里长代码是否仍整页挤爆；不行就缩小字号或拆块。

4、整页走一遍打印预览清单

**做什么：**隐藏导航 → 字号 → 链接色 → 代码块 → 页眉页脚是否重复站点名。改完再预览一次。

**为什么：**打印 CSS 改动分散，漏一项就会「半成品上纸」。

**怎么确认：**预览从首页滚到文末，无巨大页眉、无断字乱码、关键段落完整。

注意事项

• 这是个人站点实践，不是浏览器厂商规范教程；复杂 SPA、画布、付费墙页面可能需要更多规则。

• 作者写明调打印样式花了「一上午」，且怀疑真正常打印网页的人很少——目标是给纯文本站多一种阅读介质，而非承诺流量或转化。[1]

说明：以下步骤基于 Brennen Puth 2026年10月24日博文公开 CSS，于 2026年10月26日核对；不同浏览器打印引擎表现可能不一致。

来源

[1] Websites Should Be Printable，Brennen Puth，2026年10月24日。

#CSS #打印 #media_print #前端 #教程 #网页排版