网站应当支持打印
摘要
作者分享如何使用 CSS 的 @media print 规则优化网页的打印效果，包括调整字号、隐藏不必要元素和链接颜色处理，呼吁更多开发者关注网页的可打印性。
<p><a href="https://lobste.rs/s/olnqh2/websites_should_be_printable">评论</a></p>
查看缓存全文
缓存时间: 2026/10/27 01:57
# 网站应该便于打印
来源：https://brennenputh.me/blog/printable-websites/
Brennen Puth \\|2026\\-10\\-24
我正在找工作\\！\\（点击展开\\）如果你对这篇文章有任何问题或想法，我很乐意听听\\！(https://brennenputh.me/contact/)我目前正在寻找美国东北部的工作机会\\。本学年结束时，我将获得计算机科学和网络行动两个专业的理学学士学位\\。我从事过 Web 应用开发和 Java 开发，也有使用 Rust、C\\+\\+、Python 以及其他多种语言的经验\\。如果你好奇我过去做过什么，可以看看我在这里维护的一份简短项目列表 (https://brennenputh.me/projects/)，或者联系我 (https://brennenputh.me/contact/)，告诉我可以把简历发到哪里\\。我想，读我文章的人应该会有有意思的工作机会，所以任何线索我都很感激\\！
最近我读了很多打印出来的论文\\。虽然我和其他人一样喜欢在笔记本电脑上阅读，但在纸质文档上做批注更能让我投入其中\\。而且，坐在白板和纸质文档前，总有一种感觉，让我觉得自己确实在做重要的事情\\。因此，我一直在思考，怎样才能让别人也更好地通过这种媒介阅读我写的内容\\。
幸运的是，打印文档曾经是网页设计的一大重点\\。你可以打印任何自己喜欢的网页，只要按下 CTRL\\-P，然后祈祷打印机驱动今天愿意配合\\。我在自己的网页上试了一下，还傻乎乎地以为，不用做任何调整就能得到不错的打印效果\\。
结果不怎么样，不过至少所有内容都能看到\\。文字大了差不多两个字号，页眉打印出来很难看，链接在黑白打印时则灰得厉害\\。完全无法接受\\。
### 让内容便于打印
幸运的是，正如前面提到的，Web 社区曾经很重视从 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` 类，让它们只在打印的文档中显示\\。目前，我用它在副标题旁加上一小段作者署名\\。
2. `noPrint` 用于从打印的网页中移除某些内容\\。我把它加在了页眉上，因为说实话，页眉打印出来实在很丑\\。
3. 调整打印时的字号非常重要\\。我在网站上使用的动态缩放文字，到了纸上就显得很难看\\。`12pt` 是一个普遍接受的字号，所以我觉得用它就行\\。标题字号稍大一些也很合理\\。
4. 对 `giallo` 的调整是针对代码块的\\。说实话，即使做了一些调整，代码块仍然是最丑的部分\\。它们总想作为一个整体显示，不愿跨页拆分，如果有人知道解决办法，我会非常感激\\。
5. 虽然我很喜欢网站上的蓝色链接，但它们变成灰度后很难看\\。把它们改成与其他文字相同的颜色就好\\。这些 CSS 代码你喜欢哪段就拿去用，我不介意\\。我个人非常希望能看到更多认真考虑打印效果的网页\\。
### 为什么你也应该这样做
尝试这样优化自己的网站后，我能理解那些不愿优先考虑打印的人\\。为了在打印时正确隐藏和显示各种内容，我花了大半个上午\\。我的网站还算不上复杂\\。而且，我也怀疑究竟有多少人会经常把网页打印出来\\。说不定只有我一个\\。
不过，如果你的网站全是文字，让人们用自己喜欢的媒介来阅读这些文字，怎么都不是坏事\\。数字媒介提供了很大的灵活性\\。通往优秀软件的道路，是由软件工程师对用户的一点点善意铺成的\\。也许有一天，有人会发现这份善意，露出微笑，哪怕只有短短一瞬\\。那就值得了\\。
---
**更新于 2026\\-10\\-26：**一位朋友告诉我，我提交这篇文章后，它登上了 HN 和 lobste\\.rs 的首页\\。真有意思\\！虽然现在有人指出了我的 CSS 中的好几处问题，我仍希望这篇文章至少能促使一些人更认真地考虑这种媒介\\。感谢大家阅读\\！
相似文章
使用 CSS 媒体查询提升无障碍体验（2025）
一篇关于利用 prefers-contrast、prefers-reduced-motion、prefers-color-scheme 等 CSS 媒体查询提升网站可访问性的前端实践文章，介绍如何在不重做设计的前提下响应用户偏好设置。
@GitHub_Daily: 看到一个好看的网站想照着做，光提取配色、字体、间距就得翻半天 CSS。 SkillUI 给它一个网址，能把整套设计系统自动扒下来。 配色、字体、间距、动画、组件截图，打包成 Claude Code 能直接读的 Skill。 GitHub：…
SkillUI 是一个命令行工具，可以从任意网站提取完整的设计系统，包括配色、字体、间距、动画和组件截图，并打包成 Claude Code 可直接读取的格式，帮助快速复刻网站的视觉风格。
Siteprint
Siteprint 是一款适用于 Mac 的 Safari 扩展，可以测量任意网站的设计——颜色、字号层级、间距、圆角与布局——并将其导出为一段提示词，直接用于 Claude Code、Cursor、Codex 等 AI 编码工具，售价一次性 9.99 美元。
用 CSS 实现下划线
一篇博客文章探讨了 CSS 下划线长期以来存在的问题（颜色只能继承父元素、粗细不统一），以及 text-decoration-thickness/color 等新属性如今已在所有主流浏览器中普及，开发者无需再用 border 来模拟下划线。
@Huanusa: 前端+设计师真的要失业了！ 有人做了个神器 http://designmd.me： 直接扔网站URL进去，一键提取完整设计系统 （配色、字体、组件、布局全扒出来），自动生成 DESIGN.md 文件！ 直接扔网站 URL 进去， 一键提取…
有人开发了一个神器 designmd.me，只需输入网站 URL 即可一键提取完整的设计系统（配色、字体、组件、布局），自动生成 DESIGN.md 文件。配合已有 5.4 万星的 awesome-design-md 仓库，能快速复刻顶级品牌的 UI。