91网首页-91网页版-91网在线观看-91网站免费观看-91网站永久视频-91网站在线播放

導(dǎo)讀

對(duì)于有打印需求的網(wǎng)頁(yè)，特別是文章的詳情頁(yè)，需要設(shè)置專(zhuān)門(mén)的打印樣式來(lái)適配頁(yè)面。CSS 打印樣式允許你為網(wǎng)頁(yè)設(shè)置專(zhuān)門(mén)用于打印的樣式。文本就是專(zhuān)門(mén)介紹如何使用 CSS 打印樣式為 Web 頁(yè)面設(shè)置專(zhuān)業(yè)的打印機(jī)效果。

@media print

通過(guò)使用 @media print 媒體查詢(xún)，你可以定義打印時(shí)使用的CSS規(guī)則。聲明打印樣式有兩種方法：

使用 @media print 的媒體查詢(xún)

@media print {

    .no-print {

        display: none;

    }

}

在 style 或者 link 標(biāo)簽使用 media=print 屬性

<style media="print">...</style> 

<link rel="stylesheet" media="print" />

CSS 打印樣式常見(jiàn)技巧

以下是一些常見(jiàn)的 CSS 打印樣式設(shè)置的技巧：

隱藏不必要的內(nèi)容

在打印時(shí)，一般都只需要顯示頁(yè)面中的正文內(nèi)容，因此需要隱藏導(dǎo)航欄、廣告等不需要打印的元素。

@media print {

    .no-print {

        display: none;

    }

}

設(shè)置打印友好的字體和顏色

打印機(jī)的顯示和 Web 頁(yè)面的顯示還是有一定區(qū)別的。要知道，不是所有的瀏覽器默認(rèn)的背景顏色都是白色，默認(rèn)的字體顏色是黑色的。設(shè)置打樣樣式是需要使用簡(jiǎn)單的字體和明確指定白背景色和黑色文字顏色來(lái)確保打印的清晰度。

@media print {

    body {

        font-family: Arial, sans-serif;

        color: #000;

        background: #fff;

    }

}

!important 確保瀏覽器采用 print 的樣式

上面的實(shí)例代碼中都使用了 !important，這是因?yàn)樵谠O(shè)置 print 的樣式時(shí)，普通 Web 頁(yè)面通用樣式的層疊，可能會(huì)導(dǎo)致打印樣式失效，這時(shí)需要特別采用 !important 來(lái)確保瀏覽器采用print下面的樣式，例如：

@media print {

  .outline {

    &-message,

    &-toolbar {

      /* 隱藏不必要的內(nèi)容 */  

      display: none !important;

    }

  }  

}

字體大小

在CSS打印樣式中設(shè)置字體大小時(shí)，有幾個(gè)關(guān)鍵點(diǎn)和建議可以幫助你確保打印輸出的可讀性和一致性。

使用相對(duì)單位

如果你的 Web 頁(yè)面使用的是相對(duì)單位（如em、rem、%）。那么打印樣式也應(yīng)該保持一致，基礎(chǔ)字體設(shè)置絕對(duì)大小，其它均用相對(duì)單位，可以使字體大小相對(duì)于父元素或根元素調(diào)整，確保打印時(shí)的比例一致。

@media print {

  body {

      /* 基礎(chǔ)字體大小使用絕對(duì)值 */

      font-size: 12pt !important; 

  }

  

  h1 {

     /* 繼承自body的2倍字體大小 */

      font-size: 2em !important; 

  }

  

  p {

      /* 與body相同的字體大小 */

      font-size: 1em !important; 

  }

}

使用絕對(duì)單位

如果你的 Web 頁(yè)面使用的是絕對(duì)單位（如px、in、cm），那么打印樣設(shè)置時(shí)要使用 pt 單位設(shè)置基礎(chǔ)文字大小，pt 值和 px 值要最好相等，以確保打印時(shí)的字體大小固定，不受屏幕大小或其他因素的影響。

@media print {

    /* 全局字體大小 */

    body {

         

    }

    

    /* 標(biāo)題字體大小 */

    h1 {

        font-size: 14pt; 

    }

    

    /* 段落字體大小 */

    p {

         

    }

}

pt 和 px 的關(guān)系

使用絕對(duì)值的時(shí)候，pt 的值怎么才能跟 Web 頁(yè)面中的 px 對(duì)應(yīng)呢？例如前文中希望在打印樣式中使用的字體大小的絕對(duì)值與 Web 中的字體大小保持一致，要如何換算呢？

在 CSS中，pt（點(diǎn)）和 px（像素）是常用的單位，用于設(shè)置字體大小和其他尺寸。計(jì)算它們之間的轉(zhuǎn)換可以幫助你在不同的環(huán)境中保持一致的樣式。

標(biāo)準(zhǔn)屏幕分辨率（96 DPI）

1pt = 1/72 英寸

1英寸 = 96 像素

因此，1pt = 96/72 像素 ≈ 1.333px

公式

從pt轉(zhuǎn)換為px：px = pt * 96 / 72

從px轉(zhuǎn)換為pt：pt = px * 72 / 96

從 pt 轉(zhuǎn)換為 px

12pt 轉(zhuǎn)換為 px：12 * 96 / 72 = 16px

14px 轉(zhuǎn)換為 px：10 * 96 / 72 ≈ 13.33px

從 px 轉(zhuǎn)換為 pt

16px 轉(zhuǎn)換為 pt：16 * 72 / 96 = 12pt

14px 轉(zhuǎn)換為 pt：14 * 72 / 96 ≈ 14px

順便說(shuō)一下，設(shè)置打印樣式的字體大小時(shí)，推薦的單位是 pt。

調(diào)整布局

在設(shè)置打印樣式，由于受到打印顯示區(qū)域的寬度顯示，無(wú)法向 Web 頁(yè)面那樣在一個(gè)很寬的區(qū)域顯示內(nèi)容，在打印預(yù)覽時(shí)很多除浮動(dòng)和固定定位的內(nèi)容會(huì)換行或者顯示不正常。這是就需要調(diào)整布局，移除浮動(dòng)和固定定位，使內(nèi)容在打印時(shí)更加整齊。

@media print {

    .float-element {

        float: none !important;

    }

    .fixed-element {

        position: static !important;

    }

}

分頁(yè)

控制分頁(yè)符的位置，避免內(nèi)容在打印時(shí)被不合理地分割。例如：

@media print {

  .page-break {

      /* 在元素之前插入分頁(yè)符 */

      page-break-before: always !important; 

      /* 避免在元素內(nèi)部插入分頁(yè)符 */

      page-break-inside: avoid !important; 

  }

}

需要說(shuō)明的是，這個(gè)分頁(yè)控制需要根據(jù)特定的頁(yè)面內(nèi)容來(lái)設(shè)置。不是一個(gè)通用的設(shè)置技巧，并且根據(jù)我的個(gè)人實(shí)踐來(lái)說(shuō)，一般都不會(huì)特意設(shè)置分頁(yè)控制的打印樣式。

鏈接和媒體處理

打印界面是無(wú)法顯示 Web 頁(yè)面中的視頻和音頻信息的，因此需要隱藏視頻、音頻等無(wú)法打印的媒體元素，并顯示鏈接的 URL。

@media print {

  a:after {

      /* 技巧1：在鏈接文字后顯示 URL 地址 */

      content: " (" attr(href) ")";

  }

  /* 技巧2：在鏈接文字顯示下劃線和高亮色顯示 */

  a:link,

  a:visited:

  a:hover {

     text-decoration: underline;

     color: #507afe;      

  }

  video, audio {

      display: none !important;

  }

}

說(shuō)明：bootstrap 之類(lèi)的 CSS 庫(kù)也會(huì)有一些打印樣式的設(shè)置，如果你的 Web 頁(yè)面使用第三方庫(kù)的，需要看看打印效果。例如 bootstrap 就設(shè)置技巧1那樣的額外顯示 URL 地址的鏈接文字，如果你不需要，需要這樣覆蓋：

@media print {

  a:after {

      /* 技巧1：在鏈接文字后顯示 URL 地址 */

      content: "" !important;

  }

}  

表格打印優(yōu)化

確保表格在打印時(shí)的邊框和對(duì)齊方式清晰。

@media print {

  table {

      width: 100%;

      border-collapse: collapse;

  }

  th, td {

      border: 1px solid #000;

      padding: 8px;

  }

}

頁(yè)眉和頁(yè)腳

如果希望打印時(shí)顯示頁(yè)面的相關(guān)信息，還可以在打印樣式中為每頁(yè)添加頁(yè)眉和頁(yè)腳，用以顯示標(biāo)題、頁(yè)碼等信息，并且還可以設(shè)置打印的頁(yè)邊距。

@media print {

  @page {

    /* 設(shè)置打印的頁(yè)邊距 */

    /* 設(shè)置內(nèi)容的上下邊距，以避免頁(yè)眉和頁(yè)腳覆蓋內(nèi)容 */

    margin: 1in;

    

    /* 其它可選位置：@top-left @top-right */

    @top-center {

        /* 頁(yè)眉左側(cè)顯示標(biāo)題 */

        content: "Document Title"

    }

    

    /* 其它可選位置：@bottom-left @bottom-right */

    @bottom-center {

        /* 頁(yè)腳右側(cè)顯示頁(yè)碼 */

        content: "Page "counter(page) " of "counter(pages); 

    }

  }

}

CSS 打印樣式的應(yīng)用實(shí)踐

這里還是以我的 outline.js 項(xiàng)目為例，以下是使用了 outline.js 頁(yè)面的原始界面：

 

這個(gè)是打印預(yù)覽界面：

前文介紹的主要的打印頁(yè)面的技巧在 outline.js 中基本都用到了。以下是完整的打印樣式代碼：

@media print {

  html,

  body {

    /* 打印的基礎(chǔ)字體大小 */

    font-size: 12pt;

    /* 顯示設(shè)置文字顏色和背景顏色 */

    background-color: @white;

    color: @primary_text_color;

    height: initial !important;

  }

  /* 設(shè)置鏈接樣式 */

  a:link,

  a:visited,

  a:hover {

    text-decoration: underline !important;

    color: @primary_color;

  }

  /* 隱藏媒體標(biāo)簽 */

  video,

  audio {

    display: none !important;

  }

  /* 確保表格在打印時(shí)的邊框和對(duì)齊方式清晰 */

  table {

    width: 100%;

    border-collapse: collapse;

  }

  th,

  td {

    border: 1px solid @primary_border_color;

    padding: 8px 20px;

  }

  .outline {

    &-message,

    &-toolbar {

      /* 隱藏了工具欄和信息提示框 */

      display: none !important;

    }

    &-reader {

      display: block !important;

      overflow: hidden;

      &__title {

        margin: 13.4pt 0 28pt !important;

        text-align: center !important;

        font-size: 32pt !important;

      }

      /* 取消了絕對(duì)定位 */

      &--reading {

        position: relative !important;

        height: auto !important;

        padding: 0 !important;

        background-color: @white;

        overflow: hidden !important;

      }

      /* 隱藏閱讀進(jìn)度條 */

      &__progress {

        display: none !important;

      }

      /* 打印時(shí)不顯示正文 DOM 的陰影效果 */

      &__paper {

        box-shadow: none;

      }

      pre {

        padding: 1em !important;

        border: 1px solid @border_color !important;

        border-radius: 4px !important;

      }

      pre,

      code {

        background-color: @white !important;

      }

      table,

      img,

      svg {

        break-inside: avoid;

      }

      /* 所有文章內(nèi)容 DOM 相關(guān)的鄰居節(jié)點(diǎn)都隱藏了 */

      &_sibling {

        display: none !important;

      }

    }

  }

}

設(shè)置打印樣式的基礎(chǔ)字體大小和文字和背景顏色：

@media print {

  html,

  body {

    /* 打印的基礎(chǔ)字體大小 */

    font-size: 12pt;

    /* 顯示設(shè)置文字顏色和背景顏色 */

    background-color: @white;

    color: @primary_text_color;

    height: initial !important;

  }

}

設(shè)置鏈接文字高亮顯示

@media print {

  /* 設(shè)置鏈接樣式 */

  a:link,

  a:visited,

  a:hover {

    text-decoration: underline !important;

    color: @primary_color;

  }

}

隱藏媒體標(biāo)簽（內(nèi)容）

@media print {

  /* 隱藏媒體標(biāo)簽 */

  video,

  audio {

    display: none !important;

  }

}

確保表格在打印時(shí)的邊框和對(duì)齊方式清晰

@media print {

  /* 確保表格在打印時(shí)的邊框和對(duì)齊方式清晰 */

  table {

    width: 100%;

    border-collapse: collapse;

  }

  th,

  td {

    border: 1px solid @primary_border_color;

    padding: 8px 20px;

  }

}

隱藏了非正文 DOM 的所有其他內(nèi)容

@media print {

  .outline {

    &-message,

    &-toolbar {

      /* 隱藏了工具欄和信息提示框 */

      display: none !important;

    }

    

    /* 隱藏閱讀進(jìn)度條 */

    &__progress {

      display: none !important;

    }

    

    /* 所有文章內(nèi)容 DOM 相關(guān)的鄰居節(jié)點(diǎn)都隱藏了 */

    &_sibling {

      display: none !important;

    }

  }  

}

作者：自由的巨浪

鏈接：https://juejin.cn/post/7398472542313611276

來(lái)源：稀土掘金

著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。