首页 >web前端 >css教程 >如何使用CSS创建打印机友好的页面

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

William Shakespeare原创: 2025-02-08 10:27:091012浏览

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

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

钥匙要点

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

>打印旅行或音乐会门票

复制路线方向或时间表

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

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

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

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

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

>打印样式表

打印CSS可以是：

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

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

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

之后

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

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

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

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

<span><span><span><link</span> rel<span>="stylesheet"</span> media<span>="screen"</span> href<span>="main.css"</span> /></span>
</span><span><span><span><link</span> rel<span>="stylesheet"</span> media<span>="print"</span> href<span>="print.css"</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</span> rel<span>="stylesheet"</span> href<span>="main.css"</span> /></span>
</span><span><span><span><link</span> rel<span>="stylesheet"</span> media<span>="print"</span> href<span>="print.css"</span> /></span>
</span>

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

>删除不必要的部分

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

<span><span><span><link</span> rel<span>="stylesheet"</span> media<span>="screen"</span> href<span>="main.css"</span> /></span>
</span><span><span><span><link</span> rel<span>="stylesheet"</span> media<span>="print"</span> href<span>="print.css"</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</span> rel<span>="stylesheet"</span> href<span>="main.css"</span> /></span>
</span><span><span><span><link</span> rel<span>="stylesheet"</span> media<span>="print"</span> href<span>="print.css"</span> /></span>
</span>

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

<span><span><span><link</span> rel<span>="stylesheet"</span> media<span>="screen"</span> href<span>="main.css"</span> /></span>
</span><span><span><span><link</span> rel<span>="stylesheet"</span> media<span>="print"</span> href<span>="print.css"</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</span> rel<span>="stylesheet"</span> href<span>="main.css"</span> /></span>
</span><span><span><span><link</span> rel<span>="stylesheet"</span> media<span>="screen"</span> href<span>="print.css"</span> /></span>
</span>

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

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

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

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

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

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

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

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

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

>印刷疼痛

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

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

中使用
添加一些页面中断并删除不必要的部分将使用户满意并将您的网站提高到竞争对手之上。

对于更高级的CSS知识，请阅读我们的书

css Master，第三版。关于使用CSS

创建打印机友好的页面的常见问题解答

>创建CSS打印样式表对于在打印网页时控制网页的外观很重要。结束我们的结尾，介绍一些有关如何使用CSS创建打印机友好的页面的常见问题。> 什么是打印的CSS？

>可以直接从浏览器打印网页，但是打印的网页通常看起来不像您在屏幕上看到的页面。网页具有CSS样式，并且CSS也可以用于为印刷页面提供样式。但是，网页样式通常不会很好地打印，因此，专门为印刷页面编写CSS样式很重要。 CSS打印是一组专门设计的，旨在帮助打印机格式化印刷页面的布局。

我如何使用CSS进行打印？

>网页CSS将自动应用于网页的印刷版本，但通常会带有意外或不需要的结果。与更灵活的浏览器环境相比，For Print的CSS识别印刷页面的独特约束。打印样式的设置涉及思考元素如何最好地在印刷页面上布置。这可能包括与打印无关的隐藏元素，例如菜单之类的造型链接，以使URL在打印页面上可见的方式，并删除与印刷的背景图像和字体颜色，这些图像和字体颜色可能与印刷网页的版本。

我如何设置CSS打印样式表？

>有两种基本方法可以在CSS中提供打印样式：通过单独的样式表或通过媒体查询。 CSS打印样式可以存储在文档的

部分中链接到网页的单独样式表中：

> CSS打印样式可以通过媒体查询放置在样式表中，以及其他媒体的样式：

@media print {
/ *在此处 * / *打印样式 * /
}

打印样式表有哪些常见用例？

>用于打印样式表的常见用例包括：
- 调整字体尺寸和样式以在纸上可读性。
- 删除或隐藏打印时与某些元素无关的元素（例如导航菜单）。 - 确保图像和背景颜色默认不打印。
- 指定页面断路以控制内容如何在页面上划分。

>如何在打印版本中隐藏特定元素？

>

>您可以通过将显示属性设置为无。例如：

@media print { .hide-on-in-print {显示：无;
}
}

>如何指定“打印样式”中的页面中断？

>您可以使用Page-Break-be-Befer-Break-break-ter-ter-perter-CSS属性指定页面断路。例如：

@media print {
.page-break {
page-break-before：始终;
}
}
}
>我可以更改打印文档的页面余量吗？

是的，您可以使用打印样式表中的@page规则更改打印文档的页面余量。例如：

@page {
margin：1cm;
}

我如何确保图像和背景颜色不打印？

>您可以通过使用CSS属性（如背景图像和背景色）来防止图像和背景颜色在打印样式表中没有值。例如：

@media print {
img {
display：none;
}

body { background-color：white;
}
}

是否可以更改字体样式和尺寸以打印？

>

是的，您可以通过指定打印样式表中的不同样式来更改字体样式和尺寸，以打印。例如：

@media print {
{
font-size：12pt;
font-family：arial，sans-serif;
}
}
}

}

在打印之前如何测试我的打印样式表？

>您可以使用Web浏览器的打印预览功能来测试打印样式表。大多数现代浏览器都可以让您查看页面印刷时的外观，而无需实际打印。

以上是如何使用CSS创建打印机友好的页面的详细内容。更多信息请关注PHP中文网其他相关文章！

声明：

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：How to Create a CSS Typewriter Effect for Your Website下一篇：Bootstrap Card Component: a Complete Introduction

查看更多

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

钥匙要点

>打印样式表

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

或

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

>删除不必要的部分

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

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

添加补充内容

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

我如何设置CSS打印样式表？

打印样式表有哪些常见用例？

>

>您可以使用Page-Break-be-Befer-Break-break-ter-ter-perter-CSS属性指定页面断路。例如：

是的，您可以使用打印样式表中的@page规则更改打印文档的页面余量。例如：

>您可以通过使用CSS属性（如背景图像和背景色）来防止图像和背景颜色在打印样式表中没有值。例如：

>

相关文章

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

>