欧美成人精品手机在线观看_69视频国产_动漫精品第一页_日韩中文字幕网 - 日本欧美一区二区

導(dǎo)讀

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

@media print

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

使用 @media print 的媒體查詢

@media print {

    .no-print {

        display: none;

    }

}

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

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

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

CSS 打印樣式常見技巧

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

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

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

@media print {

    .no-print {

        display: none;

    }

}

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

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

@media print {

    body {

        font-family: Arial, sans-serif;

        color: #000;

        background: #fff;

    }

}

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

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

@media print {

  .outline {

    &-message,

    &-toolbar {

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

      display: none !important;

    }

  }  

}

字體大小

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

使用相對單位

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

@media print {

  body {

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

      font-size: 12pt !important; 

  }

  

  h1 {

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

      font-size: 2em !important; 

  }

  

  p {

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

      font-size: 1em !important; 

  }

}

使用絕對單位

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

@media print {

    /* 全局字體大小 */

    body {

         

    }

    

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

    h1 {

        font-size: 14pt; 

    }

    

    /* 段落字體大小 */

    p {

         

    }

}

pt 和 px 的關(guān)系

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

在 CSS中，pt（點(diǎn)）和 px（像素）是常用的單位，用于設(shè)置字體大小和其他尺寸。計算它們之間的轉(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

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

調(diào)整布局

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

@media print {

    .float-element {

        float: none !important;

    }

    .fixed-element {

        position: static !important;

    }

}

分頁

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

@media print {

  .page-break {

      /* 在元素之前插入分頁符 */

      page-break-before: always !important; 

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

      page-break-inside: avoid !important; 

  }

}

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

鏈接和媒體處理

打印界面是無法顯示 Web 頁面中的視頻和音頻信息的，因此需要隱藏視頻、音頻等無法打印的媒體元素，并顯示鏈接的 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;

  }

}

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

@media print {

  a:after {

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

      content: "" !important;

  }

}  

表格打印優(yōu)化

確保表格在打印時的邊框和對齊方式清晰。

@media print {

  table {

      width: 100%;

      border-collapse: collapse;

  }

  th, td {

      border: 1px solid #000;

      padding: 8px;

  }

}

頁眉和頁腳

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

@media print {

  @page {

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

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

    margin: 1in;

    

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

    @top-center {

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

        content: "Document Title"

    }

    

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

    @bottom-center {

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

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

    }

  }

}

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

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

 

這個是打印預(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;

  }

  /* 確保表格在打印時的邊框和對齊方式清晰 */

  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;

      }

      /* 取消了絕對定位 */

      &--reading {

        position: relative !important;

        height: auto !important;

        padding: 0 !important;

        background-color: @white;

        overflow: hidden !important;

      }

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

      &__progress {

        display: none !important;

      }

      /* 打印時不顯示正文 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;

  }

}

確保表格在打印時的邊框和對齊方式清晰

@media print {

  /* 確保表格在打印時的邊框和對齊方式清晰 */

  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

來源：稀土掘金

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