如何使用CSS创建易于打印的页面

“谁打印网页？” 我听到你哭了！相对而言，很少有纸页可以复制。但是请考虑：

打印旅行或音乐会门票复制路线方向或时间表保存副本以供离线阅读在连通性差的区域中访问信息在危险或肮脏的条件下使用数据，例如厨房或工厂输出书面注释的草稿内容打印网络收据以进行簿记向难以使用屏幕的残障人士提供文件为拒绝使用这种新奇的t-internet废话的同事打印页面。

不幸的是，打印页面可能会令人沮丧：

文字可能太小，太大或太暗列可能太窄，太宽或页边距溢出切片可能被裁剪或完全消失墨水浪费在不必要的彩色背景和图像上链接网址无法显示图标，菜单和广告将被打印，永远无法点击！

许多开发者主张Web可访问性，但很少有人记得使打印的Web可访问！

将敏感的，连续的介质转换为任何尺寸和方向的分页纸都可能是一项挑战。但是，CSS打印控件已经可以使用很多年了，基本样式表可以在数小时内完成。以下各节介绍了使页面易于打印的良好支持和实用选项。新建一个前端学习qun438905713，在群里大多数都是零基础学习者，大家相互帮助，相互解答，并且还准备很多学习资料，欢迎零基础的小伙伴来一起交流。

打印样式表

打印CSS可以是：

除屏幕样式外，还适用。以屏幕样式为基础，打印机样式将在必要时覆盖这些默认样式。应用为单独的样式。屏幕和打印样式是完全分开的。两者都从浏览器的默认样式开始。

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

可以<head>在标准样式表之后将打印样式表添加到HTML ：

该print.css样式将被应用除了屏幕样式打印页面时。

要分离屏幕和打印介质，main.css应仅将屏幕定位：

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

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

@media print可以添加任意数量的规则，因此对于将关联的样式保持在一起可能是可行的。屏幕和打印规则也可以根据需要分开：

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

测试打印机输出

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

打印预览

最可靠的选项是浏览器中的打印预览选项。这显示了如何使用默认的纸张尺寸处理分页符。

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

开发者工具

尽管不会显示分页符，但是DevTools（F12或Cmd/Ctrl+ Shift+ I）可以模拟打印样式。

在Chrome中，打开开发者工具，然后选择更多工具，然后从右上角的三点图标菜单中选择渲染。更改模拟CSS媒体对打印在该面板的底部。

在Firefox中，打开开发人员工具，然后在“ 检查器”选项卡的样式窗格中单击“ 切换打印媒体模拟”图标：

破解您的媒体属性

假设您正在使用<link>标签来加载打印机CSS，则可以将media属性临时更改为screen：

同样，这不会显示分页符。media="print"完成测试后，请不要忘记将属性还原到。

删除不必要的部分

在执行其他操作之前，请使用删除并折叠多余的内容display: none;。纸上典型的不必要部分可能包括导航菜单，英雄图像，页眉，页脚，表单，边栏，社交媒体小部件和广告块（通常是iframe）。

/* print.css */ header, footer, aside, nav, form, iframe, .menu, .hero, .adslot { display: none; }

display: none !important;如果CSS或JavaScript功能根据特定的UI状态显示元素，则可能需要使用。使用!important通常不推荐，但我们可以证明其在一组基本的打印机款式其中覆盖屏幕默认使用。

线性化布局

这么说让我很痛苦，但是Flexbox和Grid很少能在任何浏览器中很好地使用打印机布局。如果遇到问题，请考虑display: block;在布局框上使用或类似方法，并根据需要调整尺寸。例如，设置width: 100%;为跨整个页面宽度。

打印机样式

现在可以应用打印机友好的样式。建议：

确保您在白色背景上使用深色文字考虑使用衬线字体，这可能更易于阅读将文字大小调整为12pt或更大必要时修改填充和边距。标准cm，mm或in单位可能更实用。

进一步的建议包括…

采用CSS列

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

/* print.css */ article { column-width: 17em; column-gap: 3em; }

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

使用边框代替背景色

您的模板可能具有用深色或反色方案表示的部分或标注框：

通过用边框表示这些元素来节省墨水：

删除或反转图像

用户将不想打印装饰性和非必要的图像和背景。您可以考虑使用默认设置，其中所有图像都被隐藏，除非它们具有一个print类：

/* print.css */ * { background-image: none !important; } img, svg { display: none !important; } img.print, svg.print { display: block; max-width: 100%; }

理想情况下，打印的图像应在浅色背景上使用深色。可以在CSS中更改HTML嵌入的SVG颜色，但是在某些情况下，位图会更暗：新建一个前端学习qun438905713，在群里大多数都是零基础学习者，大家相互帮助，相互解答，并且还准备很多学习资料，欢迎零基础的小伙伴来一起交流。

甲CSS滤波器可以用来在打印样式表以反转和调整颜色。例如：

/* print.css */ img.dark { filter: invert(100%) hue-rotate(180deg) brightness(120%) contrast(150%); }

结果：

添加补充内容

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

前端学习线路

发布了110 篇原创文章 · 获赞 44 · 访问量 11万+

私信关注

如何使用CSS创建易于打印的页面

猜你喜欢