css-tricks 的两篇关于打印的文章

css-tricks 的两篇文章
Quick Tip: Making a ‘Print This Page’ Button
CSS-Tricks Finally Gets A Print Stylesheet

Quick Tip: Making a ‘Print This Page’ Button

In your head section:

<link rel="stylesheet" href="../../stylesheets/coloringpage.css" type="text/css" media="screen, projection" />
<link rel="stylesheet" href="../../stylesheets/coloringpageprint.css" type="text/css" media="print" />

The button:

<a href="javascript:window.print()"><img src="../../images/click-here-to-print.jpg" alt="print this page" id="print-button" /></a>

The coloring page image:

<img src="../../images/coloring-page-1.gif" alt="Coloring Page 1" width="1094" height="1275" />

The CSS:

#print-button {
    display: none;
}

CSS-Tricks Finally Gets A Print Stylesheet

body {
    font-family: Georgia, serif;
    background: none;
    color: black;
}
#page {
    width: 100%;
    margin: 0; padding: 0;
    background: none;
}
#header, #menu-bar, #sidebar, h2#postcomment, form#commentform, #footer {
    display: none;
}
.entry a:after {
    content: " [" attr(href) "] ";
}
#printed-article {
    border: 1px solid #666;
    padding: 10px;
}

字体

用衬线体

尽量的占满纸

移除 margin 和 padding

原生样式并不坏

去掉多余的东西

显示链接

调整分页

设置 Page Break
可以参考 Advanced CSS Printing — Using CSS Page Breaks