引入樣式：
- <link rel=“” href=“” media=“print”/>
- @media print{}
單位(cm,in英寸)
1 inch = 2.54 cm
1cm = 96/2.54 ≈ 37.80 px
1px = 2.54/96 ≈ 0.0265 cm
100px = 2.65 cm
A4紙的標(biāo)準尺寸為:
21.0cm * 29.7 cm
在96DPI分辨率下,其對應(yīng)的像素尺寸大約為:
794px * 1123px
web打印總結(jié)：
設(shè)置基本的打印樣式 @media print { body { color: #000; background: #fff; } }
隱藏不相關(guān)的部分如：導(dǎo)航條、背景圖片
使用厘米或者英寸作為單位
使用 @page 控制打印樣式 @page {margin: 2cm; }
避免標(biāo)題和內(nèi)容跨頁 h2, h3 { page-break-after: avoid; }
防止圖片過寬超出紙張 img {max-width: 100% !important;}
articles 文章內(nèi)容新分頁： article {page-break-before: always;}
列表和圖片不被頁： ul, img {page-break-inside: avoid;}
強制打印頁面背景圖和顏色（firefox opera 和IE可能不支持）
@media print and (color) { * { -webkit-print-color-adjust: exact;print-color-adjust: exact; }}
擴展超鏈接
@media print {
article a {
font-weight: bolder;
text-decoration: none;
}
article a[href^=http]:after {
content:" <" attr(href) "> ";
}
}
article a[href^="#"]:after {
content: "";
}
／／鏈接周圍圖像是比較麻煩的，理想的情況是圖像周圍的鏈接將有一個class。
$a:after > img {
content: "";
}
／／CSS選擇器實現(xiàn)將很簡單：
a:not(:local-link):after {
content:" <" attr(href) "> ";
}
打印鏈接二維碼使之更容易訪問
我們需要使用谷歌 圖形API來實現(xiàn)：
- 我們希望谷歌提供的圖表信息（ qr ，在我們的例子中）;
- 呈現(xiàn)大小的的QR印記，以像素為單位;
- URL進行編碼;
- 使用的字符編碼形式。
通常我們會在頁面頂部的一個標(biāo)題元素關(guān)聯(lián)的URL：
@media print {
header h1:after {
content: url(https://chart.googleapis.com/chart?cht=qr&chs=150x150&chl=http://yourdomain.com&choe=UTF-8);
position: absolute;
right: 0;
top: 0;
}
}
這個方法的缺點是使開發(fā)者每個元素都請求一個API。如果你的主機是PHP，則可以自動生成當(dāng)前頁面的URL:
@media print {
h1:after {
content: url(https://chart.googleapis.com/chart?cht=qr&chs=150x150
&chl=http://<?=$_SERVER["SERVER_NAME"].$_SERVER["REQUEST_URI"];?>
&choe=UTF-8);
position: absolute;
right: 0;
top: 0;
}
}
給wordpress的樣式：
@media print {
h1:after {
content: url(https://chart.googleapis.com/chart?cht=qr&chs=150x150
&chl=http://<?phpthe_permalink();?>&choe=UTF-8);
position: absolute;
right: 0;
top: 0;
}
}
使用CSS3 Filter 提高打印的質(zhì)量
瀏覽器通常會打印出橫幅圖像，特別是如果有問題的旗幟在黑暗的背景是白色的：
@media print {
header {
background: none;
color: #000;
}
header img {
filter: url(inverse.svg#negative);
-webkit-filter: invert(100%);
filter: invert(100%);
}
}
CSS3的過濾器做什么，你所期望的 – 在頭圖像反色，變成黑白色，反之亦然 – 但它們只能在Chrome和Safari。 為了彌補Firefox，我們需要一種不同的方法 – 相當(dāng)于過濾器作為一個單獨的SVG文件寫：
<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" />
</filter>
</svg>
從理論上講，你可以使用一個CSS sprite 之間進行切換不同版本的打印的標(biāo)志，但是這將意味著增加一倍的文件大小可能沒有什么好處。 相反，我建議使用CSS過濾器（和SVG當(dāng)量，為Firefox）的反轉(zhuǎn)圖像之前，打印的頁面： 印刷兩種形式的標(biāo)志（即α-蒙面PNG或純黑色背景）的結(jié)果是：
@page規(guī)則
紙張尺寸,方向,頁邊距,分頁
可用尺寸：5.5＊8.5英寸
紙質(zhì)尺寸：A4 或 legal
頁面方向：portrait 或 landscape
eg： @page{size: A4 landscape; margin:2cm}
頁面模塊
頁面模塊定義了頁面區(qū)域和16個環(huán)繞的邊距盒。頁面區(qū)域是頁面上一塊頁面內(nèi)容流動的空間。當(dāng)超出了它的容納范圍，就會創(chuàng)建另一個頁面。邊界盒只在CSS生成的內(nèi)容上使用。
左邊距 @page :left { margin-left: 3cm; }
右邊距 @page :right { margin-left: 4cm;}
:first @page :first {// 選擇器選中是文檔的第一頁}
:blank @page :blank {// 選中任何“故意左側(cè)留白”的頁面。要添加這樣的文字，我們可以使用目標(biāo)是邊距盒頂部中心的生成內(nèi)容。
@top-center { content: "This page is intentionally left blank." }
}
生成內(nèi)容
eg：把書名添加到奇數(shù)頁邊距盒的左下角
@page:right{
@bottom-left {margin: 10pt 0 30pt 0; border-top: .25pt solid #666; content: "My book"; font-size: 9pt; color: #333;}
}
分頁符
強制標(biāo)題處于頁面開頭
避免標(biāo)題后面立即斷頁
避免斷開圖像和表格
h1 { page-break-before: always;}
h1, h2, h3, h4, h5 { page-break-after: avoid;}
table, figure { page-break-inside: avoid;}
計數(shù)器
頁碼：
CSS提供了預(yù)定義頁面計數(shù)器；它從1開始并且每新的一頁加1 。放到邊距盒的其中之一。
在下面的例子中，我們把頁碼放在奇數(shù)頁的右下角和偶數(shù)頁的左下角。
@page:right{
@bottom-right {content: counter(page); }
}
@page:left{
@bottom-left { content: counter(page); }
}
自定義css計數(shù)器
為章節(jié)創(chuàng)建一個叫chapternum的計數(shù)器并且每出現(xiàn)h1增加-
body {
counter-reset: chapternum;// 計數(shù)器名
}
h1:before {
counter-increment: chapternum; //計數(shù)增加
content: counter(chapternum) ". ";
}
圖像的計數(shù)
使用chapternum.figurenum。所以“Figure 3-2”代表第三章第二幅圖。
body {
counter-reset: chapternum figurenum;
}
h1 {
counter-reset: figurenum; // 重置figurenum讓它每章都從1開始
}
h1.title:before {
counter-increment: chapternum;
content: counter(chapternum) ". ";
}
figcaption:before {
counter-increment: figurenum;
content: counter(chapternum) "-" counter(figurenum) ". ";
}
生成內(nèi)容
string-set的值是你想給這段內(nèi)容取得名字然后使用content()。隨后你可以用string()作為生成內(nèi)容輸出。
h1 {
string-set: doctitle content();
}
@page :right {
@top-right {
content: string(doctitle);
margin: 30pt 0 10pt 0;
font-size: 8pt;
}
}
page-break-after 設(shè)置元素后是否應(yīng)當(dāng)放置分頁符。 auto、always、avoid、left、right
page-break-before 設(shè)置元素前否應(yīng)當(dāng)放置分頁符。 auto、always、avoid、left、right
page-break-inside 設(shè)置元素內(nèi)部是否應(yīng)當(dāng)放置分頁符。 auto、avoid
orphans 設(shè)置當(dāng)元素內(nèi)部發(fā)生分頁時必須在頁面底部保留的最少行數(shù)。
widows 設(shè)置當(dāng)元素內(nèi)部發(fā)生分頁時必須在頁面頂部保留的最少行數(shù)。比如:
h2, h3 { page-break-after: avoid; }
分頁
表格
