Print —— 被埋没的Media Type


总结自http://cdc.tencent.com/?p=8155

样式引入

嵌入打印样式到样式文件中

@media print {  }

彩色打印

@media print and (color) {  }

单独引用样式文件

<link rel="stylesheet" type="text/css" media="print" href="print.css" />

指定多个媒体类型

<link rel="stylesheet" type="text/css" media="screen, print" href="all.css" />

全局重置

优化背景色

* {
    color:#000 !important;
    text-shadow:none !important;
    background:transparent !important;
    box-shadow:none !important;
}

隐藏显示

隐藏导航,广告

    .print-hide{display:none;}

显示折叠,隐藏内容

.print-show{display:block}

基本设置

字体设置,标题无衬线,内容衬线

标题:

.title{
    font-family:"hiragino sans gb",simhei,sans-serif;
    font-weight:500;
    font-size;14pt;
}

内容:

.text{
    font-family:fangsong,simsun,serif;
    font-size:12pt;
}

pt是绝对长度单位,屏幕受分辨率大小影响,显示效果会不同;
而输出到纸张为固定尺寸.

Points(pt):用在纸张上,为1/72 inch.

参考CSS文字大小单位px,em,pt

rem呢?

内容展现

页边距:

@page{
    margin:1.5cm;
}

排版:

.type{
    width:100%;
    margin:0;
    float:none;
    line-height:1.5;
}

打印分页:

分页要避免:
1.段落和图片分隔成两部分
2.引用内容打断
3.标题和内容尽量显示在同一页

h1,h2,h3,h4,h5,h6{
    page-break-after:avoid;
    page-break-inside:avoid;
}
img{
    page-break-after:avoid;
    page-break-inside:avoid;
}
blockquote,table,pre{
    page-break-inside:avoid;
}
ul,ol,dl{
    page-break-before:avoid;
}

注意:page-break-before:avoid;

元素打磨

链接

显示文字链接

a:link:after{
    content:"(" attr(href) ")";
    /*  字体小一点  斜体*/
}

突出显示:

a:link {
    font-weight:bold;
    text-decoration:underline;
    color:#06c;
}

图片

图片超出纸张大小

img{
    max-width:100% !important;
}

防止图片分割在不同页

img{
    page-break-inside:avoid;
}

节省打印成本

img{
    filter:url(inverse.svg#negative);
    -webkit-filter:invert(100%);
    filter:invert(100%);
}
<svg xmlns="http://www.w3.org/2000/svg">
    <filter id = "negative">
    <feColorMatrix values="-1 0 0 0 1
    0 -1 0 0 1
    0 0 -1 0 1
    0 0 0 1 0" />
</svg>

注意:滤镜filter

表格

每页都打印表头

thead{
    display:table-header-group;
    font-weight:bold;
}

每页都打印表尾

tfoot{
    display:table-footer-group;
    font-weight:bold;
}

Box Decoration Break

box-decoration-break: slice | clone;


左侧为slice属性,右侧为clone属性
关于打印排版的内容还有很多,感兴趣的同学还可以去w3c官网上查看下具体的工作草案CSS Paged Media Module Level 3

二维码

可以便捷的访问原网址
print5

.title h3:after{ content: url(‘qrcode.png’); position: absolute; top: 0; right: 0;}

需注意的是二维码的位置不要遮盖到

@media print {
    header::before{ 
    content: url(http://chart.apis.google.com/chart?chs=120x120&cht=qr&chl=http%3A%2F%2Falgonquinstudios.com/Engage/Careers);
    }
}

参考链接

Printing The Web
CSS-Tricks Finally Gets A Print Stylesheet
Make an Editable/Printable HTML Invoice
Making a ‘Print This Page’ Button
打印样式CSS的技巧和要点
CSS文字大小单位px、em、pt
AirPrint