Question to say "I can!"

體驗更佳的打印樣式的10條忠告

2011-01-31

原文:體驗更佳的打印樣式的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, &#8216;Times New Roman&#8217;, serif;
}

9、我的博客有很多留言,怎么辦

這個問題就看你自己的選擇了,你也可以讓留言整個都不打印出來#comments{display:none;}

你也可以把評論挪到其他地方,給讀著權利要不要打印出來。

#comments {
	page-break-before: always;
}

比如,你的博客有兩頁半長,那么評論就會從第四頁開始,這樣用戶打印的時候也就能選擇要不要打印了。

10、顯示打印版的提示

比如:感謝您的打印,請上我們的網站閱讀更多文章rockux.com這樣的話,如果在打印頁上出現,讀者一定不會覺得太糟糕,相反可能會感到被在乎。這也很簡單,只要:

#printMsg {
	display: block;
}

當然,默認的要個#printMsg{display:none}的樣式才行。

作者:admin | Categories:設計問題 | Tags:

發表評論

電子郵件地址不會被公開。 必填項已用*標注

*

澳洲f1赛车b盘开奖套路 内蒙古快三官网 安徽福彩快三开奖结果 港王中王开奖结果查询 甘肃11遗漏号码查询 燕赵排列七走势图 腾讯3分彩怎么玩 重庆幸运农场什么时候开奖 重庆幸运农场官方网址 浙江6+1规则 泓胜配资 福彩快乐十分推算技巧 佳永配资_股票配资网|最专业的配资平台 上海快3在线计划 富豪配资 20选5预测专家 股票中权重是什么意