Question

我正在寻找关于在打印网页时制作合适的打印css的任何建议/规则/指南。你有什么要提供的吗？

Answer 1

以下是一些用于获得更好打印效果的常规打印样式：

/* Print styles */
@media print 
{
    tr, td, th {page-break-inside:avoid}
    thead {display:table-header-group}
    .NoPrint {visibility:hidden; display:none}
    a {color:#000000}
}

最上面一个可以防止表格行中的分页符

thead样式使thead标记中的任何行重复表格所跨越的每个页面。

NoPrint是我用来在屏幕上显示内容的类，但不是用于打印。

而且，我喜欢关闭链接颜色。

Answer 2

我确保放入打印样式表中的一件事是：

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

这会在链接文本旁边写下实际链接，这样打印文档的人就会知道该链接是假设的。

我还将我的正文设置为更具可读性：

body{
    font: 0.9em/1.5em Georgia, "Times New Roman", Times, serif;
}

Answer 3

首先阅读A List Apart（http://www.alistapart.com/articles/goingtoprint/）中的这篇文章。它们涵盖了您正在寻找的许多基础知识（扩展链接，粉刷等）。

不要依赖打印预览，确保在测试打印版面时完成整个过程。要节省纸张安装SnagIt或使用Microsoft XPS文档编写器。您可以直接打印到图像而不会浪费任何纸张。

对于长篇文章，请考虑将字体更改为serif。网上的文章最容易阅读sans-serif（Arial，Verdana），但在印刷版中试用Times New Roman或Georgia。

Answer 4

你在列表上有这个旧的但仍然相关的article from Eric Meyer。

重点是重新开始，明确地设置边框和边缘/填充到0，白色背景和“显示无”到任何非必要的打印元素（如某些菜单）

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

body {
    background: white;
    }

#menu {
    display: none;
    }

#wrapper, #content {
    width: auto; 
    margin: 0 5%;
    padding: 0; 
    border: 0;
    float: none !important;
    color: black; 
    background: transparent;
    }

从那里开始。

Answer 5

当您定义打印样式时，您必须考虑纸张和物理单位。

以厘米（英寸）为单位设置边距，以磅为单位设置字体大小（就像在OpenOffice中一样）。
创建一个类似'screen'或'noprint'的类，以便轻松删除不需要的内容材料
忘掉花哨的彩色文字。在白色背景的黑文本。
考虑删除多余的图像 - 它们在黑白中可能看起来不那么好
从链接中删除下划线，并使链接具有合理的文本。阅读“查看此页面”看起来很愚蠢，其中“this”有下划线。或者如果你在带下划线的文本之后放置链接的href，那么它可能会更有用但看起来不那么好恕我直言。

Answer 6

注意背景图像和颜色。我认为IE的默认行为不是打印背景图像或颜色。

设置print css的好规则？

6 个答案: