前几天看到有人讨论“将博客文章批量导出为PDF文档”的相关话题，这让我想到：如果将博客文章打印出来，会是什么效果？
我打开浏览器，点开一篇博客文章，按下Ctrl+P，看到了弹出的打印预览效果：很一般，和显示在A4纸大小的屏幕上的博客文章没什么两样。而且由于这种“屏幕”的特殊性，“打印”出来的内容是会被分页的，而且每一页都有顶部的LOGO、菜单和搜索图标，底部还有各种链接、评论框、标签等在这种特殊的“屏幕”上显得很多余元素，而且这种针对屏幕的排版对纸面空间的利用率非常低。
通过简单的搜索，我了解到CSS可以为打印指定专用的样式。操作方法也很简单，如果你用的也是WordPress，那么你可以在当前主题（或子主题，下同）文件夹下的header.php文件中的<head>和</head>之间添加如下代码：
<link rel="stylesheet" href="/wp-content/themes/[your-theme]/printstyle.css" media="print" />将上述代码中的[your-theme]修改成你当前主题文件夹，并在此文件夹下新建一个printstyle.css，接下来，将需要用于打印的CSS代码写入其中即可。其他的CMS操作方法也是类似的，这里就不赘述了。
要将网页内容更好地打印在纸上，我首先想到的是以下几个优化方向：
- 删除“在纸上不可用且没必要展示的内容”，如分类、标签、评论框、小工具、推荐文章、背景；
- 增加“在纸上不可用但有必要展示的内容”，如链接、来源声明；
- 优化“在纸上可用且有必要展示的内容”的显示效果，如文章、评论等内容的颜色、排版；
- 保留一部分可以体现网站风格但不影响打印效果的元素，如颜色、字体、边框。
经过一些尝试后，初步确定了目前的风格。虽然仍有一些BUG，不过总的来说也无伤大雅，至少比优化之前好太多了。如果你正在使用电脑查看这篇文章，你可以立即按下Ctrl+P来查看当前的打印效果；如果你想知道优化之前的效果，只需打开浏览器控制台，将“printstyle.css”文件内容清空后再按下Ctrl+P。
当然，“打印网页”这种需求现在应该几乎不存在了，但它还有一个用法是：将文章保存为PDF。如果你想将某一篇文章分享给你的网友，却发现你的网站链接已经被各平台“特殊关照”，那这个功能就很可能派上用场了，至少会比截图和纯文本好一些。
我又随机访问了几位博友，尝试查看他们的博客文章打印样式，发现其实WordPress官方的主题对文章打印效果是有一定的优化的，而第三方的主题往往并没有很重视这个问题，直接打印的效果十分惨不忍睹，经常出现背景复杂、排版错乱、内容重复交叠等情况。当然，还有一些像我一样喜欢“魔改”主题的人，把人家本来优化得好好的效果给改得面目全非了。
我试了一下默认什么都不调整。
我的一篇文字需要打印七页，不过其中有三页是空白的。
这就是我说的“惨不忍睹”。
不过问题也不大，可以在打印样式里隐藏掉左侧边栏、评论框，然后优化一些细节就可以得到还不错的效果。
曾经添加过这个功能，后来又去掉了，感觉对图片支持不太好。macOS Safari 可以直接使用阅读模式打印，但遇到图片跨页问题时仍然不好看。
是啊，这并不能彻底解决这个问题，只是尽可能做一点优化。对于比较大的图片，想做好的话只能重新排版，没有其他捷径。
真要保存住博客文章，打印版是必须了。
尝试了PDF，很有趣，不一样角度。
效果不太好
我在开发移动端适配的时候，了解过这个。@media print 就是控制打印时的表现效果。但是我觉得我不会遇到要将文章打印出来的场景，就没有做这个适配。
我也试了，效果的确不行，浪费版面太多
是的，默认的效果一般都比较差，所以需要额外优化。可以试试打印我博客里的文章。
第一次意识到页面打印样式这个问题，博主目前优化的这个打印样式看起来真不错，有一种vscode禅模式的感觉。这个样式用来阅读感觉挺不错的