一些关于打印的文章

本文来源Advanced CSS Printing — Using CSS Page Breaks
换页符可以用在:

  • 标题之前 (h2 or h3 tags, depending on your site format)
  • 文章结尾,评论之前
  • 长文之中

The CSS

@media all {
    .page-break { display: none; }
}

@media print {
    .page-break { display: block; page-break-before: always; }
}

The first declaration ensures that the page-break is never seen visually...while the second ensures that the page break is seen by the printer.

The HTML

<div class="page-break"></div>

Quite simple, huh?

<h1>Page Title</h1>
<!-- content block -->
<!-- content block -->
<div class="page-break"></div>
<!-- content block -->
<!-- content block -->
<div class="page-break"></div>
<!-- content block -->
<!-- content -->

下面来自Optimizing Your Website Structure For Print Using CSS

删除不需要的东西

.no-print       { display:none; }
<!-- Example -->
<div id="navigation" class="no-print">
    .... <!-- who needs navigation when you're looking at a printed piece? -->
</div>

下面来自Optimizing Your Website Content For Print Using CSS

调整标题

<h1>要足够大. <h2> 我推荐用下划线. <h3> 可以和文本一样大,或者大一点.我推荐用一点 margin .

h1,h2,h3 { font-weight:bold; }
h1 { font-size:24px; }
h2 { font-size:16px; border-bottom:1px solid #ccc; padding:0 0 2px 0; margin:0 0 5px 0; }
h3 { font-size:13px; margin:0 0 2px 0; }

调整段落

我建议调整段落的 margin 大于 line-height:

p {
    font-size:11px; 
    font-family:times new roman, serif; 
    margin:0 0 18px 0; 
}

链接

a {
    text-decoration:underline; 
}

显示链接

a:link:after, 
a:visited:after { 
    content: " (" attr(href) ") "; 
    font-size: 90%; 
}

以下来源于Tips And Tricks For Print Style Sheets

打印背景

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

只有Webkit才能用

链接

@media print {
   article a {
      font-weight: bolder;
      text-decoration: none;
   }

   article a[href^=http]:after {
      content:" <" attr(href) "> ";
   }
}

anchor links 的问题

article a[href^="#"]:after {
   content: "";
}

Links around images are rather more difficult, because CSS does not currently allow for the selection of an element based on its children. Ideally, links around images would have a class that we could target via CSS. Longer term, CSS4 features a parent selector that will do the job:

$a:after > img {
   content: "";
}

如果在CSS4上就简单了

a:not(:local-link):after {
   content:" <" attr(href) "> ";
}

QR Codes

QR code

<header>
<h1>Lizabeth’s Salon</h1>
<h2>Providing Intellectual Stimulation Online Since 2001</h1>
</header>
header h1 {
   margin-right: 200px;
   margin-bottom: 2rem;
   line-height: 1.5;
}
@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;
   }
}

来源于How To Set Up A Print Style Sheet

打印logo

用两张图

<a href="/" title="Home" class="logo">
   <img src="img/logo.png" alt="Smashing Winery" class="screen"/>
   <img src="img/logo_print.png" alt="" class="print"/>
</a>
header h1, header nav, footer, img {
    display: none;
}
header .print {
    display: block;
}

Print Preview by Tim Connell is a handy little jQuery plugin that replicates the built-in print-preview function