首頁

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媒體的控制始終將受到限制，並且結果可能會在瀏覽器之間變化。也就是說：

>打印機友好的樣式床單可以恢復到任何站點