CSS-Tricks 终于有了打印样式表

这已经拖延了很久了……但它终于来了：一个打印样式表！

我将首先向您展示整个样式表，然后我将解释一下我的想法。

body {
	font-family: Georgia, serif;
	background: none;
	color: black;
}
#page {
	width: 100%;
	margin: 0; padding: 0;
	background: none;
}
#header, #menu-bar, #sidebar, h2#postcomment, form#commentform, #footer {
	display: none;
}
.entry a:after {
	content: " [" attr(href) "] ";
}
#printed-article {
	border: 1px solid #666;
	padding: 10px;
}

1. 使字体尽可能易读

在网络上，这里文章的正文字体是无衬线字体。 在印刷页面上，我认为衬线字体更容易阅读，因此我将字体族重置为 Georgia。 没有背景和黑色文本是默认设置，但以防万一，我在正文中明确声明了它。

2. 尽可能利用页面空间

同样，我认为这是默认行为，但由于我将内容包装在“页面”标签中，因此我认为我可以利用它来设置 100% 的宽度并删除任何边距和填充。

3. 默认样式对于打印来说并不差

请注意，除了设置字体外，我没有进行任何排版样式。 默认打印样式，我认为，它本身在这方面做得相当不错。 这是假设您使用的是高质量标记。 在我的文章中，标题是<h2>标签，副标题是<h3>标签，正文段落位于<p>标签中。 这将在印刷页面上产生一个不错的字体大小层次结构，而无需任何样式。

代码示例，它们包装在<code>和<pre>标签中，默认情况下会使用等宽字体，这很棒。 无序列表会缩进并添加项目符号。

3. 删除多余的东西

如果有人打印您的文章，很可能是因为他们想将内容保存为参考资料、稍后阅读或与朋友分享。 他们真的不需要看到您的页面导航、侧边栏或花哨的页脚。 再假设您拥有良好且语义标记的代码，删除这些部分就像将这些区域父元素的**显示值**设置为**无**一样简单。

4. 在正文内容中显示 URL

[感谢 David Walsh 提供此想法] 内容中的链接在印刷页面上没有任何作用。 如果您可以用手指轻触链接的词语，它将在您的计算机上打开网页，那会很酷，但这是我连电影里都没见过的东西。 目前，我们只能使用 CSS 伪元素::after，使用内容属性，将 URL 放在链接旁边。 IE 不支持它，但 c’est la vie。

5. 添加感谢语

在我的内容末尾，我添加了一个小型的“感谢”语。 此区域在网络上隐藏，但在打印文章时显示。 我认为这是一个不错的点缀，它还可以提醒读者应该回到网站上获取最新内容。

6. *可选：* 分页符

我觉得我的文章没有真正需要特定的分页符，但如果您编写了带有副标题的*非常长的*文章，您一定要考虑在每个副标题之前放置分页符。 另一个可以使用分页符的好地方是在一个相当大的表格之前。 没有什么比不得不翻页看表格更糟糕的了，因为表格恰好跨越了两个页面，而它本来可以放在一个页面上的。 我计划根据情况使用这些分页符。 有关分页符的更多信息，请访问 此处的分页符。

---

所以现在您可以随心所欲地打印我的文章了！ 请告诉我您对打印样式表的其他任何建议，或您对我打印样式表的任何意见。