Print Css控制打印效果_html/css_WEB-ITnose-HTML Tutorial-php.cn

Print Css控制打印效果_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 11:17:40

Original

2161 people have browsed it

不经过任何处理而直接打印网站上的页面会得到一个不理想的效果。显示器(screen)和打印机(printer)是两种差别很大的设备,所以从浏览器里看到的页面,打印出来也许和你看到的样子有很大的差距。因此如果要精确的控制打印效果就应该使用print css。接下来，我们来先了解一些语法。

语法

设备类型	CSS版本	兼容性	简介
all	CSS2	IE4+	用于所有设备类型
aural	CSS2	NONE	用于语音和音乐合成器
braille	CSS2	NONE	用于触觉反馈设备
embossed	CSS2	NONE	用于凸点字符（盲文）印刷设备
handheld	CSS2	NONE	用于小型或手提设备
print	CSS2	IE4+	用于打印机
projection	CSS2	NONE	用于投影图像，如幻灯片
screen	CSS2	IE4+	用于计算机显示器
tty	CSS2	NONE	用于使用固定间距字符格的设备。如电传打字机和终端
tv	CSS2	NONE	用于电视类设备

重新针对打印写CSS样式是没有必要的，我们只需要针对差异设置打印的样式覆盖掉之前的默认样式。

// 设置显示器用字体尺寸@media screen {body {font-size:12pt; }}// 设置打印机用字体尺寸@media print {body {font-size:8pt;}}

Copy after login

在编写打印样式表的时候，你要注意要使用厘米或者英寸作为单位而不是屏幕像素单位，实际的单位对打印非常有用。常见的DPI(Dot Per Inch)为96的screen,px与cm的换算关系如下：

A4纸的标准尺寸为:

在96DPI分辨率下,其对应的像素尺寸大约为:

为了保证打印样式有用，写CSS样式使打印的内容距离纸张边缘，看起来更好，需要使用 @page 这个语法：

@media print {   @page {      margin: 2cm;   }}

Copy after login

h2, h3 { page-break-after: avoid; }

Copy after login

article {   page-break-before: always;}

Copy after login

ul, img {   page-break-inside: avoid;}

Copy after login

值	描述
auto	默认。如果必要则在元素后插入分页符。
always	在元素后插入分页符。在遇到特定的组件时，打印机会重新开始一个新的打印页
avoid	避免在元素后插入分页符。
left	在元素之后足够的分页符，一直到一张空白的左页为止。
right	在元素之后足够的分页符，一直到一张空白的右页为止。
inherit	规定应该从父元素继承 page-break-after 属性的设置。

如果用户是在 webkit 内核浏览器上打印的话，我们可以强制打印机打印屏幕上所看到的颜色（即强制在打印页面上出现任何的背景图和颜色），一般来说彩色打印机可以做到这点，我们需要一个单独的媒体查询：

@media print and (color) {   * {      -webkit-print-color-adjust: exact;      print-color-adjust: exact;   }}

Copy after login

注意:在firefox opera 和IE，不能使用背景图和颜色。