如何使用 CSS 为您的网站设置样式以进行打印

已发表: 2015-08-28

印刷与网络有什么关系？

我们大多数人都生活在网上，从网络上获取我们所有的信息。 我们每天都通过许多设备保持联系。 你可能听说过印刷品已经死了，事实上，这肯定不是真的！ 我们可能不像以前那样频繁地打印，但在某些情况下，在设备上查看内容并不能替代查看硬打印副本。 您是否有有价值的操作指南内容、可兑换的优惠券、说明、投资组合示例或用户希望在印刷版中看到的任何其他内容？ 如果是这样，在您的网站上设置自定义打印规则肯定会帮助您塑造用户体验。

办公打印机

如何设计印刷品

通过定义特定于打印的样式，所有的魔法都包含在 CSS 中。 您可能会发现创建一个单独的print.css样式表很有帮助，这样它就可以与您的所有其他样式分开。 请记住，并非所有网站都有打印样式表； 这是开发过程中的附加功能和步骤。 如果未指定打印样式，则使用默认样式进行打印。 我们将定义样式以提高打印效率，这将覆盖任何默认值。

请记住：您永远不应该在实时站点上进行更改。 我们免费的本地开发应用程序 Local 将帮助您简化工作流程并安全地试验您的网站。 今天就试试吧！

命名约定和特定样式对于您自己项目的样式表将是唯一的，但这些概念将适用。 添加基础知识后，浏览您网站的默认样式表，寻找需要打印样式的任何独特情况，以确保获得最佳打印体验。

颜色和布局注意事项

由于彩色墨水的费用，大多数人更喜欢黑白打印。 此外，当文本为黑色并打印在白纸上时，对比度更高。 您可能熟悉媒体查询，因为它们在现代响应式网页设计中至关重要。 媒体查询也是创建打印样式所必需的。

这将使正文中的文本变为黑色，并摆脱任何背景颜色以获得最佳打印效果：

@media print {
body {
color: #000;
background: #fff;
}
}




很有可能，文本将以 Times New Roman 格式打印出来。 这没有什么问题，但如果你想指定不同的字体怎么办？ 就像您在默认样式中所做的一样，这也可以在打印中完成。 当我们这样做时，我们不要忘记行高。
		




body {
font: 13pt Tahoma, Geneva, sans-serif;
line-height: 1.5;
}




隐藏不必要的元素


您可能已经习惯于保持display: none到最低限度，但这对于您的打印样式来说是完全可以的。 通过隐藏某些元素，您可以为用户提供更好的打印方式，并保留硬拷贝中不必要的任何内容。 目标是让他们有效地打印出最重要的内容，而不是确切的网页。


有些页面元素不是必需的，例如导航、页脚、侧边栏和背景图像，所以这就是我们的display: none派上用场。


@media print {
nav, aside, footer {
display: none;
}

section {
background: none
}
/* section had a patterned background in the default styling which is best removed in the print style */
}




文章经常被打印出来，所以让每篇文章从单独的页面开始是很棒的。 如果关键信息被组合在一起而不是分布在多个页面上，那么用户可以更容易地组织他们的打印输出。
		




通过将此添加到您的打印样式表中，文章将始终从新页面开始：


article {
page-break-before: always;
}




将无序列表放在同一页面上也是一个好主意：


ul {
page-break-inside: avoid;
}




让我们更进一步，对标题、图像、块引用、表格和其他列表元素做同样的事情：


h1, h2, h3, h4, h5, h6 {
page-break-after:avoid;
page-break-inside:avoid
}

img {
page-break-inside:avoid;
page-break-after:avoid;
}

blockquote, table, pre {
page-break-inside:avoid
}

ul, ol, dl {
page-break-before:avoid
}

[/code]

</pre>
<img class="aligncenter wp-image-12547 size-full" src="https://getflywheel.com/wp-content/uploads/2015/08/print-styling-03.jpg" alt="print-styling-03" width="1022" height="480" />
<pre>
<h3>Page margin measurements</h3>

We will be adding a width of 100% to the body and article and getting rid of any unnecessary margins or padding. That way we can strip out any unnecessary spacing.



body, article {
width: 100%;
margin: 0;
padding: 0;
}




在这里，间距可以真正为打印输出进行微调。 您在网页设计中看到厘米并不常见，但它非常适合确定页面上的边框。 @page规则是我们将如何定位间距。 此示例将允许所有边框周围留出 2 厘米。 可以自定义此测量以允许更多或更少的空间。 例如，您的用户可能想要做笔记并允许更大的边距会有所帮助。
		




@page {
margin: 2cm;
}




如果要打印页面并将其放入活页夹中，请记住，可以选择调整每隔一页的页边距。 左页是第 1、3、5... 页，右页是第 2、4、6... 页


@page :left {
margin: 1cm 3cm 1cm 2cm;
}

@page :right {
margin: 1cm 2cm 2cm 3cm;
}




在某些情况下，首页定制会派​​上用场。 通过使用:first page 伪类，可以确定第一个打印页面的样式：


@page :first {
margin: 1cm 2cm;
}




打印样式-02


打印会让你感到压力吗？ 这里有一些提示，可以像专业人士一样打印您的项目。
		




图片和介绍文字的想法


这些可能适用于您的网站，也可能不适用于您的网站，但仍然需要注意。


为防止图像被切断并溢出打印页面的边缘，添加最大宽度声明将防止这种情况发生。


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




一个很好的欢迎信息是一个很好的补充。 打印内容将存在一段时间，因此包含友好的消息或提醒总是很好的。


header:before {
display: block;
content: "Thank you for visiting my website at www.mysite.com.   Please check back for upcoming specials and new products.";
margin-bottom: 15px;
padding: 5px 8px;
font-style: italic;
}




现在我们已经介绍了一些打印注意事项的基础知识，很容易将这些想法合并到您的打印样式表中。 尽管我们在使用网络时最终考虑的不是印刷品，但它是一种很好的方式，可以为您的用户提供同样出色的体验，无论他们如何访问内容。