首页

web前端

css教程

如何使用CSS创建打印机友好的页面

William Shakespeare

Feb 08, 2025 am 10:27 AM

如何使用CSS创建打印机友好的页面

在本文中，我们回顾了使用CSS创建打印机友好网页的艺术。

钥匙要点

打印机友好的页面的重要性：尽管存在数字时代，但仍需要对打印机友好的网页。打印网页对于各种目的都是必不可少的，例如打印旅行票，离线阅读，并为那些难以使用屏幕的人提供可访问的信息。本文强调了优化打印网页以改善可访问性和用户体验的必要性。
实用的技巧和技术：本文为创建有效的打印样式提供了丰富的实用建议。关键建议包括删除不必要的元素，使用适当的字体和尺寸进行线性化布局，管理页面中断以及包括印刷版本的补充内容。这些技巧可帮助Web开发人员确保可以轻松有效地打印其网站，从而在维护Web内容的完整性的同时节省墨水和纸张。
为什么我们需要CSS进行打印？

>打印旅行或音乐会门票

复制路线方向或时间表

保存副本以进行离线阅读
>连接性差的区域中访问信息
使用危险或肮脏条件下的数据 - 例如，厨房或工厂
的残疾人提供文件
不幸的是，打印页面可能是一个令人沮丧的经历：
文本可能太小，太大或太微弱

列可能太狭窄，太宽或溢出页面边缘

部分可以完全裁剪或完全消失

墨水浪费在不必要的彩色背景和图像上
>
许多开发人员主张网络可访问性，但很少有人记得让印刷网络访问！

>将响应式，连续的媒体转换为任何规模和方向的分类纸可能具有挑战性。但是，CSS打印控制已有多年了，并且可以在数小时内完成基本样式表。以下各节描述了使您的页面友好型页面的良好支持和实用的选择。

>打印样式表

打印CSS可以是：

。以您的屏幕样式为基础，打印机样式可根据需要覆盖这些默认值。
用作单独的样式。屏幕和打印样式是完全分开的。两者都从浏览器的默认样式开始。

选择取决于您的网站/应用。就个人而言，我在大多数情况下都使用屏幕样式作为打印基础。但是，我已经为具有根本不同输出的应用程序使用了单独的样式表 - 例如会议预订系统，该系统在屏幕上显示时间表网格，但在纸上按时间顺序排列。

标准样式表之后，可以将打印样式表添加到html ：

之后

<span><span><span><link> rel<span>="stylesheet"</span> href<span>="main.css"</span> /></span>
</span><span><span><span><link> rel<span>="stylesheet"</span> media<span>="print"</span> href<span>="print.css"</span> /></span>
</span></span></span>

> print.css样式将在打印页面时应用于屏幕样式。

要分开屏幕和打印媒体，main.css仅针对屏幕：>

或者，可以使用@Media规则将打印样式包含在现有CSS文件中。例如：

<span><span><span><link> rel<span>="stylesheet"</span> media<span>="screen"</span> href<span>="main.css"</span> /></span>
</span><span><span><span><link> rel<span>="stylesheet"</span> media<span>="print"</span> href<span>="print.css"</span> /></span>
</span></span></span>

>可以添加任意数量的@Media打印规则，因此这对于将相关样式保持在一起可能是实用的。屏幕和打印规则也可以在必要时分开：

<span>/* main.css */
</span><span>body {
</span>  <span>margin: 2em;
</span>  <span>color: #fff;
</span>  <span>background-color: #000;
</span><span>}
</span>
<span>/* override styles when printing */
</span><span><span>@media print</span> {
</span>
  <span>body {
</span>    <span>margin: 0;
</span>    <span>color: #000;
</span>    <span>background-color: #fff;
</span>  <span>}
</span>
<span>}
</span>

测试打印机输出

<span>/* main.css */
</span>
<span>/* on-screen styles */
</span><span><span>@media screen</span> {
</span>
  <span>body {
</span>    <span>margin: 2em;
</span>    <span>color: #fff;
</span>    <span>background-color: #000;
</span>  <span>}
</span>
<span>}
</span>
<span>/* print styles */
</span><span><span>@media print</span> {
</span>
  <span>body {
</span>    <span>margin: 0;
</span>    <span>color: #000;
</span>    <span>background-color: #fff;
</span>  <span>}
</span>
<span>}
</span>

>每次您要测试打印布局时，都不需要杀死树木并使用非常昂贵的墨水！以下选项在屏幕上复制打印样式。

>打印预览

最可靠的选项是浏览器中的“打印预览”选项。这显示了如何使用默认纸张大小来处理页面中断。

> 或者，您可以通过导出到PDF来保存或预览页面。

。

>开发人员工具

devTools（

f12

或

> cmd/ctrl

shift i> i）可以模仿打印样式，尽管页面断开不会是显示。 在Chrome中，打开开发人员工具并选择更多工具，然后从右上角的三点图标菜单中渲染。更改模拟CSS介质以在该面板的底部打印。>

在Firefox中，打开开发人员工具，然后单击“ Inspector”选项卡的样式窗格上的切换打印媒体仿真图标：

hack your媒体属性如何使用CSS创建打印机友好的页面

>假定您正在使用标签来加载打印机CSS，您可以将媒体属性临时更改为屏幕：

<span><span><span><link> rel<span>="stylesheet"</span> href<span>="main.css"</span> /></span>
</span><span><span><span><link> rel<span>="stylesheet"</span> media<span>="print"</span> href<span>="print.css"</span> /></span>
</span></span></span>

>再次，这不会揭示页面中断。完成测试后，请不要忘记将属性还原为媒体=“打印”。

>删除不必要的部分

在做其他任何事情之前，请删除和折叠冗余内容，其中包括：无;。纸上典型的不必要的部分可能包括导航菜单，英雄图像，标头，页脚，表格，侧边栏，社交媒体小部件和广告块（通常是iframe中的任何东西）：

<span><span><span><link> rel<span>="stylesheet"</span> media<span>="screen"</span> href<span>="main.css"</span> /></span>
</span><span><span><span><link> rel<span>="stylesheet"</span> media<span>="print"</span> href<span>="print.css"</span> /></span>
</span></span></span>

>可能有必要使用显示：无！如果CSS或JavaScript功能根据特定的UI状态显示元素。通常不建议使用！很重要，但是我们可以证明其在一组基本的打印机样式中使用，该样式覆盖了屏幕默认值。

>线性化布局

这么说，这让我很痛苦，但是flexbox和网格很少在任何浏览器中使用打印机布局很好地播放。如果遇到问题，请考虑使用Display：block;或在布局框上类似，并根据需要调整尺寸。例如，设置宽度：100％；跨越整页宽度。

打印机样式

现在可以应用

>打印机友好的样式。建议：

确保您在白色背景上使用深文本

考虑使用衬线字体，该字体可能更易于阅读
>将文本大小调整为12pt或更高必要时修改桨板和边距。标准CM，MM或单位可能更实用。

标准A4和美国字母纸可能会导致更长且较不可读的文本行。考虑在打印布局中使用CSS列。例如：

在此示例中，当至少有37EM的水平空间时，将创建列。无需设置媒体查询；其他列将添加到更宽的纸张中。

使用边界代替背景颜色

<span>/* main.css */
</span><span>body {
</span>  <span>margin: 2em;
</span>  <span>color: #fff;
</span>  <span>background-color: #000;
</span><span>}
</span>
<span>/* override styles when printing */
</span><span><span>@media print</span> {
</span>
  <span>body {
</span>    <span>margin: 0;
</span>    <span>color: #000;
</span>    <span>background-color: #fff;
</span>  <span>}
</span>
<span>}
</span>

您的模板可能具有深色或逆配色方案表示的部分或呼叫框：

>通过用边框表示这些元素来保存墨水：

如何使用CSS创建打印机友好的页面

>删除或反转图像

> 如何使用CSS创建打印机友好的页面 >用户不想打印装饰性和非必要图像和背景。您可以考虑一个默认值，除非所有图像都隐藏了所有图像，否

理想情况下，印刷图像应在光背景上使用深色。可能会在CSS中更改HTML插入的SVG颜色，但是在某些情况下，您的位图更暗：

<span>/* main.css */
</span>
<span>/* on-screen styles */
</span><span><span>@media screen</span> {
</span>
  <span>body {
</span>    <span>margin: 2em;
</span>    <span>color: #fff;
</span>    <span>background-color: #000;
</span>  <span>}
</span>
<span>}
</span>
<span>/* print styles */
</span><span><span>@media print</span> {
</span>
  <span>body {
</span>    <span>margin: 0;
</span>    <span>color: #000;
</span>    <span>background-color: #fff;
</span>  <span>}
</span>
<span>}
</span>

> CSS过滤器可用于在打印样式表中反转和调整颜色。例如：

结果：如何使用CSS创建打印机友好的页面

如何使用CSS创建打印机友好的页面

添加补充内容

>印刷媒体通常需要在屏幕上不需要的其他信息。 CSS内容属性可用于将文本附加到::之前和伪元素之后。例如，在文本之后在括号中显示链接的URL：

<span><span><span><link> rel<span>="stylesheet"</span> href<span>="main.css"</span> /></span>
</span><span><span><span><link> rel<span>="stylesheet"</span> media<span>="print"</span> href<span>="print.css"</span> /></span>
</span></span></span>

或您可以添加仅印刷消息：

<span><span><span><link> rel<span>="stylesheet"</span> media<span>="screen"</span> href<span>="main.css"</span> /></span>
</span><span><span><span><link> rel<span>="stylesheet"</span> media<span>="print"</span> href<span>="print.css"</span> /></span>
</span></span></span>

对于更复杂的情况，请考虑在元素上使用诸如打印等类，仅在打印时才能可见。例如：

<span>/* main.css */
</span><span>body {
</span>  <span>margin: 2em;
</span>  <span>color: #fff;
</span>  <span>background-color: #000;
</span><span>}
</span>
<span>/* override styles when printing */
</span><span><span>@media print</span> {
</span>
  <span>body {
</span>    <span>margin: 0;
</span>    <span>color: #000;
</span>    <span>background-color: #fff;
</span>  <span>}
</span>
<span>}
</span>

CSS：

<span>/* main.css */
</span>
<span>/* on-screen styles */
</span><span><span>@media screen</span> {
</span>
  <span>body {
</span>    <span>margin: 2em;
</span>    <span>color: #fff;
</span>    <span>background-color: #000;
</span>  <span>}
</span>
<span>}
</span>
<span>/* print styles */
</span><span><span>@media print</span> {
</span>
  <span>body {
</span>    <span>margin: 0;
</span>    <span>color: #000;
</span>    <span>background-color: #fff;
</span>  <span>}
</span>
<span>}
</span>

注意：大多数浏览器在打印页面的标题和/或页脚上显示URL和当前日期/时间，因此很少需要以代码生成此信息。 页面断裂

> css3属性在元素之前和之后的页面，列或区域的表现如何在元素之前和之后进行表现。支持非常好，但是较旧的浏览器可能会使用类似的页面断点 - 拆分和页面破坏属性。

可以使用以下分类值和分类值：

auto：默认值 - 允许休息，但不强制

避免：避免在页面，列或区域

避免页面：避免页面断开
页：强制页面断开
总是：页面的别名
左：强制页面断开，所以下一个是左页
右：强制页面断开，所以下一个是右页

标题之前，都会迫使页面断开：>

>

注意：要警惕过度使用页面断裂。理想情况下，打印机输出应使用尽可能少的页面。

> Break-inside（和较旧的页面断路内）属性指定是否允许在元素内进行页面断路。通常支持的值：

<span><span><span><link> rel<span>="stylesheet"</span> href<span>="main.css"</span> /></span>
</span><span><span><span><link> rel<span>="stylesheet"</span> media<span>="screen"</span> href<span>="print.css"</span> /></span>
</span></span></span>

auto：默认值 - 允许休息，但不强制避免：避免在可能的情况下

避免页：避免在可能的情况下避免内部页面断开

寡妇属性指定必须在页面顶部显示的块中的最小行数。想象一个带有五行文本的块。浏览器希望在第四行之后进行页面断开，因此最后一行出现在下一页的顶部。设置寡妇：3;在第二行上或之前断裂，因此至少三行搬到了下一页。

孤儿特性类似于寡妇，除了它控制着页面底部显示的最小行数。

slice：默认值，分解布局。顶部边框显示在第一页上，底部边框显示在第二页上。
克隆：复制边距，填充和边框。所有四个边界都显示在两个页面上。

>最后，CSS分类媒体（@page）的浏览器支持有限，但提供了针对特定页面的方法，因此可以定义替代的边距或断点：>

<span><span><span><link> rel<span>="stylesheet"</span> href<span>="main.css"</span> /></span>
</span><span><span><span><link> rel<span>="stylesheet"</span> media<span>="print"</span> href<span>="print.css"</span> /></span>
</span></span></span>

> CSS页面断路属性可以放置在您的屏幕或打印样式中，因为它们仅影响打印，但我建议在Print CSS中使用它们，以清晰地进行。

请注意，页面断开控制仅仅是浏览器的建议。不能保证会被迫或避免休息，因为布局仅限于纸张的范围。

>印刷疼痛

控制Web媒体的控制始终将受到限制，并且结果可能会在浏览器之间变化。也就是说：

>打印机友好的样式床单可以恢复到任何站点