体验更佳的打印样式的10条忠告
打印样式貌似要被遗忘了,其实他还是挺重要的,有些人会在打印一些文章在旅行途中看。
打印样式有很多好处。比如,在纸上阅读的感觉比在屏幕上好得多。
下面的10条忠告并不麻烦,但是却可以得到很好的打印样式,一起看看吧。
以防你忘记,我们看看如何设置打印样式。
<link rel="stylesheet" href="print.css" type="text/css" media="print"/>
media属性确保用户不会看到这个文件里面定义的样式。
需要注意的是,如果你的主要样式文件没有写media属性,那么打印样式就会继承他。为了区分它们,需要这样写:
<link rel="stylesheet" href="print.css" type="text/css" media="screen"/>
1、取消导航
纸质物和电脑的最大区别是什么呢?纸上的东西是静态的,而电脑上的却是有交互的。为了实现那些交互,网页一般都有导航,而导航放在纸上就是毫无用处的了。
所以隐藏掉这些不必要的东西,这个操作也非常简单:
<br /> #nav, #sidebar {<br /> display: none;<br /> }<br />
2、扩大内容区域
去掉了导航和边栏之后,内容就要充满整个页面,这样看起来才像是正常的一份文档,而不是打印在纸上的网页。
我们要做的只是改变一下宽度,重置浮动,去掉多余的边距。
<br /> #content {<br /> width: 100%;<br /> margin: 0;<br /> float: none;<br /> }<br />
3、重置背景色
很多浏览器为了节省墨水,打印时候会默认去掉背景色,为了确保整个页面是白色背景,我们需要设置一下。
body { background: white; } #content { background: transparent; }
4、重置字体颜色
我们重置了背景色之后,如果有些页面是深色背景浅色字,这样的话打印出来基本上是无法阅读的,为了修正这个问题,我们还得重新修改一下字体的颜色:
#author { color: #111; }
5、显示连接的目标地址
因为纸上是没有交互的,所以读者也就无法去点击链接来获得更多的信息。如果读者正在读一个新产品的介绍,然后看到一个链接说点过去有更多详细信息,这不是扯淡么。对于这一点能做的也只能是把链接地址打印出来了。
对于支持CSS2的浏览器来说,这个问题也比较好修复。
a:link:after { content: " (" attr(href) ") "; }
你也可以给他加上其他的样式,比如字体小一点、斜体什么的。
6、让链接从文本中突出
读者需要区别链接和普通文本,默认的蓝色和下划线是个不错的选择,但是我觉得加粗更好一些。
别忘了打印机一般都是黑白的,所以别指望能用颜色来区分。
a:link { font-weight: bold; text-decoration: underline; color: #06c; }
#0066cc是一种新蓝色,但是在灰度打印机中的颜色类似#999999,所以使用这个颜色可以在彩色打印机和黑白打印机中都有比较好的表现。也会从普通文本中突出。
7、字体大小
打印的时候12pt是比较合适的,所以我们需要设置一下字体大小
p { font-size: 12pt; }
8、字体呢
英文字体中,大多人喜欢serif,因为读着不会那么累,所以字体也得设置一下:
body { font-family: Georgia, ‘Times New Roman’, serif; }
9、我的博客有很多留言,怎么办
这个问题就看你自己的选择了,你也可以让留言整个都不打印出来#comments{display:none;}
你也可以把评论挪到其他地方,给读着权利要不要打印出来。
#comments { page-break-before: always; }
比如,你的博客有两页半长,那么评论就会从第四页开始,这样用户打印的时候也就能选择要不要打印了。
10、显示打印版的提示
比如:感谢您的打印,请上我们的网站阅读更多文章rockux.com这样的话,如果在打印页上出现,读者一定不会觉得太糟糕,相反可能会感到被在乎。这也很简单,只要:
#printMsg { display: block; }
当然,默认的要个#printMsg{display:none}的样式才行。