当我点击“打印”时，字形图标丢失，但在浏览器窗口中正确显示。 我说的是一个带有静态内容的简单页面，除了最新的 twitter 引导程序。
是否可以在打印中显示 Bootstrap 图标？
【问题讨论】：
标签： printing twitter-bootstrap icons glyphicons
我编写了一个 CSS 打印样式表解决方案，该解决方案应该可以解决 80-90% 的问题，这些问题发生在需要在打印时显示引导程序中的图标（字形图标）而不需要用户打开“打印背景图像”的网站在他们的浏览器中，此解决方案将适用于所有主要浏览器（Chrome、Safari、Firefox、IE）。
此解决方案详细参考了引导程序问题，但它应该可以在需要时将其用于其他类似的背景图像不打印问题。它还假设您使用的是单独的 @media print {} 样式表。我将解释它无法解决的 10-20% 的情况以及最后的原因（以及这些情况的解决方法）。
background-image、background-position 和 width height 属性专门用于定位和调整精灵图像的问题通过替换为属性content: url()、clip: rect()、margin-top 和margin-left 来解决有一些覆盖。
在我的例子中，我们使用<i class="icon-globe"></i> 显示国际可用课程的链接，因此用户经常打印此列表，但浏览器删除了重要的指示信息。我找到了复制所有 CSS 以将图标显示到我们的打印样式表中并添加属性值的解决方案
-webkit-print-color-adjust:exact; 到
但这只是解决了 Chrome 和 Safari 中的问题，社区没有迹象表明 Firefox 或 IE 很快就会支持这个 webkit 属性。
所以我们需要彻底改变浏览器将页面发送到打印机驱动程序时<i class="icon-globe"></i> 的呈现方式。
执行精灵的标准方法是声明一个可见的开放空间（在这种情况下为 14 像素 x 14 像素），然后将background-image 重新定位在该空间后面，以便适当的图标可以显示出来。
为了在前台有效地复制它，我们将使用content: url() 调用图像，然后clip: rect() 将此图像剪切为适当的图标，然后在margin-top 和margin-left 中使用负值来定位新的前景图像回到背景图像图标最初放置的位置。
一个困难是使用剪辑切割图像需要 4 个坐标（上、右、下、左），而 background-position 只需要 2 个坐标（xpos、ypos - 距左上角的像素距离）。使用clip 属性的另一个困难是，与padding 或margin 不同，这些坐标不是从它们各自的外部边界计算的，而是仅从顶部和左侧计算的，这实际上使我们的数学转换从background-position a稍微容易一点，但可能需要一些时间来适应。
有关剪辑属性的更多信息
（由于我的声誉低，链接已用完，所以你需要弄清楚我做了什么鬼鬼祟祟的事情）
www.ibloomstudios[dot]com/articles/misunderstood_css_clip/
css-tricks[dot]com/css-sprites-with-inline-images/
tympanus[dot]net/codrops/2013/01/16/understanding-the-css-clip-property/
回到<i class="icon-globe"></i>的例子，我们要转换
打印样式表中的这个
i[class^="icon-"], i[class*="icon-"] { 显示：内联块； 垂直对齐：文本顶部； 宽度：14px； 背景图像：无！重要； 背景重复：不重复； 背景位置：0 0！重要； } //跳过其他图标... i.icon-globe::after { 剪辑：矩形（144px 350px 158px 336px）！重要； 左边距：-336px！重要； 边距顶部：-144px！重要； 内容： url('../img/glyphicons-halflings.png')!important; 位置：绝对！重要； 宽度：自动！重要； 高度：自动！重要； }我们可以看到取background-position(xpos & ypos OR left & top)坐标并改为正数与clip: rect(top, left+14px,顶部+14px，左）。
然后我们使用原始的否定background-position: left top; 作为margin-left 和margin-top。
这个 CSS 还包括一些 !important 覆盖，以防原始引导图标显示在我们新的剪切图像之上，该图像在打印时被剥离。
这适用于地球图标并解决了我的具体问题，但后来我想知道有多少其他指示图标没有被打印，所以我使用了一些巧妙的替换记事本中的所有命令来创建引导图标 CSS 的单行版本并且制表符分隔每个元素（加上一些 px 到零，以便列对齐）...
.icon-glass { 背景位置：0 px 0 px ; } .icon-music { 背景位置：-24 像素 0 像素 ; } .icon-search { 背景位置：-48 像素 0 像素； } .icon-envelope { 背景位置：-72 像素 0 像素； } .icon-heart { 背景位置：-96 px 0 px ; } .icon-star { 背景位置：-120 像素 0 像素； } .icon-star-empty { 背景位置：-144 像素 0 像素； } .icon-user { 背景位置：-168 像素 0 像素； } .icon-film { 背景位置：-192 像素 0 像素； } .icon-th-large { 背景位置：-216 像素 0 像素； } .icon-th { 背景位置：-240 像素 0 像素； } .icon-th-list { 背景位置：-264 像素 0 像素； } .icon-ok { 背景位置：-288 像素 0 像素； } .icon-remove { 背景位置：-312 像素 0 像素； } .icon-zoom-in { 背景位置：-336 px 0 px ; } .icon-zoom-out { 背景位置：-360 像素 0 像素 ; } .icon-off { 背景位置：-384 像素 0 像素； } .icon-signal { 背景位置：-408 像素 0 像素； } .icon-cog { 背景位置：-432 像素 0 像素； } .icon-trash { 背景位置：-456 像素 0 像素； } .icon-home { 背景位置：0 px -24 px ; } .icon-file { 背景位置：-24 px -24 px ; } .icon-time { 背景位置：-48 像素 -24 像素 ; } .icon-road { 背景位置：-72 像素 -24 像素； } .icon-download-alt { 背景位置：-96 像素 -24 像素； } .icon-download { 背景位置：-120 像素 -24 像素 ; } .icon-upload { 背景位置：-144 像素 -24 像素 ; } .icon-inbox { 背景位置：-168 像素 -24 像素 ; } .icon-play-circle { 背景位置：-192 像素 -24 像素； } .icon-repeat { 背景位置：-216 像素 -24 像素； } .icon-refresh { 背景位置：-240 像素 -24 像素； } .icon-list-alt { 背景位置：-264 像素 -24 像素； } .icon-lock { 背景位置：-287 像素 -24 像素； } .icon-flag { 背景位置：-312 像素 -24 像素 ; } .icon-headphones { 背景位置：-336 像素 -24 像素； } .icon-volume-off { 背景位置：-360 像素 -24 像素； } .icon-volume-down { 背景位置：-384 px -24 px ; } .icon-volume-up { 背景位置：-408 像素 -24 像素； } .icon-qrcode { 背景位置：-432 像素 -24 像素； } .icon-barcode { 背景位置：-456 px -24 px ; } .icon-tag { 背景位置：0 px -48 px ; } .icon-tags { 背景位置：-25 像素 -48 像素； } .icon-book { 背景位置：-48 像素 -48 像素； } .icon-bookmark { 背景位置：-72 像素 -48 像素； } .icon-print { 背景位置：-96 像素 -48 像素； } .icon-camera { 背景位置：-120 像素 -48 像素； } .icon-font { 背景位置：-144 像素 -48 像素； } .icon-bold { 背景位置：-167 像素 -48 像素； } .icon-italic { 背景位置：-192 像素 -48 像素； } .icon-text-height { 背景位置：-216 像素 -48 像素； } .icon-text-width { 背景位置：-240 像素 -48 像素 ; } .icon-align-left { 背景位置：-264 像素 -48 像素； } .icon-align-center { 背景位置：-288 像素 -48 像素； } .icon-align-right { 背景位置：-312 像素 -48 像素 ; } .icon-align-justify { 背景位置：-336 像素 -48 像素； } .icon-list { 背景位置：-360 像素 -48 像素 ; } .icon-indent-left { 背景位置：-384 像素 -48 像素； } .icon-indent-right { 背景位置：-408 像素 -48 像素； } .icon-facetime-video { 背景位置：-432 像素 -48 像素； } .icon-picture { 背景位置：-456 像素 -48 像素 ; } .icon-pencil { 背景位置：0 px -72 px ; } .icon-map-marker { 背景位置：-24 像素 -72 像素； } .icon-adjust { 背景位置：-48 像素 -72 像素 ; } .icon-tint { 背景位置：-72 像素 -72 像素； } .icon-edit { 背景位置：-96 像素 -72 像素； } .icon-share { 背景位置：-120 像素 -72 像素； } .icon-check { 背景位置：-144 像素 -72 像素； } .icon-move { 背景位置：-168 像素 -72 像素； } .icon-step-backward { 背景位置：-192 像素 -72 像素； } .icon-fast-backward { 背景位置：-216 像素 -72 像素 ; } .icon-backward { 背景位置：-240 像素 -72 像素； } .icon-play { 背景位置：-264 像素 -72 像素； } .icon-pause { 背景位置：-288 像素 -72 像素； } .icon-stop { 背景位置：-312 像素 -72 像素 ; } .icon-forward { 背景位置：-336 像素 -72 像素 ; } .icon-fast-forward { 背景位置：-360 像素 -72 像素 ; } .icon-step-forward { 背景位置：-384 像素 -72 像素； } .icon-eject { 背景位置：-408 像素 -72 像素； } .icon-chevron-left { 背景位置：-432 像素 -72 像素； } .icon-chevron-right { 背景位置：-456 像素 -72 像素； } .icon-plus-sign { 背景位置：0 px -96 px ; } .icon-minus-sign { 背景位置：-24 像素 -96 像素； } .icon-remove-sign { 背景位置：-48 像素 -96 像素； } .icon-ok-sign { 背景位置：-72 像素 -96 像素； } .icon-question-sign { 背景位置：-96 像素 -96 像素； } .icon-info-sign { 背景位置：-120 像素 -96 像素； } .icon-screenshot { 背景位置：-144 像素 -96 像素； } .icon-remove-circle { 背景位置：-168 像素 -96 像素； } .icon-ok-circle { 背景位置：-192 像素 -96 像素； } .icon-ban-circle { 背景位置：-216 像素 -96 像素； } .icon-arrow-left { 背景位置：-240 像素 -96 像素 ; } .icon-arrow-right { 背景位置：-264 像素 -96 像素； } .icon-arrow-up { 背景位置：-289 像素 -96 像素； } .icon-arrow-down { 背景位置：-312 像素 -96 像素； } .icon-share-alt { 背景位置：-336 像素 -96 像素； } .icon-resize-full { 背景位置：-360 像素 -96 像素； } .icon-resize-small { 背景位置：-384 像素 -96 像素； } .icon-plus { 背景位置：-408 像素 -96 像素； } .icon-minus { 背景位置：-433 像素 -96 像素； } .icon-asterisk { 背景位置：-456 像素 -96 像素； } .icon-exclamation-sign { 背景位置：0 px -120 px ; } .icon-gift { 背景位置：-24 像素 -120 像素； } .icon-leaf { 背景位置：-48 像素 -120 像素； } .icon-fire { 背景位置：-72 像素 -120 像素； } .icon-eye-open { 背景位置：-96 像素 -120 像素； } .icon-eye-close { 背景位置：-120 像素 -120 像素 ; } .icon-warning-sign { 背景位置：-144 像素 -120 像素； } .icon-plane { 背景位置：-168 px -120 px ; } .icon-calendar { 背景位置：-192 像素 -120 像素； } .icon-random { 背景位置：-216 像素 -120 像素； } .icon-comment { 背景位置：-240 像素 -120 像素； } .icon-magnet { 背景位置：-264 像素 -120 像素； } .icon-chevron-up { 背景位置：-288 像素 -120 像素； } .icon-chevron-down { 背景位置：-313 像素 -119 像素； } .icon-retweet { 背景位置：-336 像素 -120 像素； } .icon-shopping-cart { 背景位置：-360 像素 -120 像素； } .icon-folder-close { 背景位置：-384 像素 -120 像素； } .icon-folder-open { 背景位置：-408 像素 -120 像素； } .icon-resize-vertical { 背景位置：-432 像素 -119 像素； } .icon-resize-horizontal { 背景位置：-456 像素 -118 像素； } .icon-hdd { 背景位置：0 px -144 px ; } .icon-bullhorn { 背景位置：-24 像素 -144 像素； } .icon-bell { 背景位置：-48 像素 -144 像素； } .icon-certificate { 背景位置：-72 像素 -144 像素； } .icon-thumbs-up { 背景位置：-96 像素 -144 像素； } .icon-thumbs-down { 背景位置：-120 像素 -144 像素； } .icon-hand-right { 背景位置：-144 像素 -144 像素； } .icon-hand-left { 背景位置：-168 像素 -144 像素； } .icon-hand-up { 背景位置：-192 像素 -144 像素； } .icon-hand-down { 背景位置：-216 像素 -144 像素； } .icon-circle-arrow-right { 背景位置：-240 像素 -144 像素； } .icon-circle-arrow-left { 背景位置：-264 px -144 px ; } .icon-circle-arrow-up { 背景位置：-288 px -144 px ; } .icon-circle-arrow-down { 背景位置：-312 像素 -144 像素； } .icon-globe { 背景位置：-336 像素 -144 像素； } .icon-wrench { 背景位置：-360 像素 -144 像素； } .icon-tasks { 背景位置：-384 像素 -144 像素； } .icon-filter { 背景位置：-408 像素 -144 像素； } .icon-briefcase { 背景位置：-432 像素 -144 像素； } .icon-fullscreen { 背景位置：-456 像素 -144 像素； }...然后我可以使用 Excel 电子表格一次性完成所有计算， 只要使用上面的格式，我就设置了一个 excel 表来进行任何精灵修改，我们只需要 3 个变量来复制这个过程 -img 路径、宽度和高度，如果人们要求这些细节，我将在这些单元格中使用精确的公式进行更新但是现在这里是结果（在更聪明地替换notepad ++中的所有命令以删除整数和px之间的空格并添加一些回车之后）......
i.icon-glass::after{ 剪辑：矩形（0px 14px 14px 0px）！重要； 边距顶部：0px！重要； 左边距：0px！重要； 内容： url('../img/glyphicons-halflings.png')!important;位置：绝对！重要； 宽度：自动！重要； 高度：自动！重要； } i.icon-music::after{ 剪辑：矩形（0px 38px 14px 24px）！重要； 边距顶部：0px！重要； 左边距：-24px！重要； 内容： url('../img/glyphicons-halflings.png')!important; 位置：绝对！重要； 宽度：自动！重要； 高度：自动！重要； } i.icon-搜索::之后{ 剪辑：矩形（0px 62px 14px 48px）！重要； 边距顶部：0px！重要； 左边距：-48px！重要； 内容： url('../img/glyphicons-halflings.png')!important; 位置：绝对！重要； 宽度：自动！重要； 高度：自动！重要； }Arg 我的字符空间和超链接用完了，因为我的声誉太低了，您可以帮助我） 我在较早答案中引用的 Bootstrap 问题报告中发布了整个 CSS 结果 https://github.com/twitter/bootstrap/issues/4412
现在，任何通过在浏览器窗口中使用 print 样式表而不是 screen 进行查看的人都会看到它运行良好，正如我之前所说，这个解决方案是据我所知，除了 10%-20% 的情况外，它会起作用。此解决方案的例外情况只会在实际打印页面（或打印到文件以进行无纸调试）时出现。
由于使用clip 属性所必需的position: absolute; 属性，新的前景图像精灵可能会溢出可打印区域之外。当涉及到 W3C 标准时，这些图像的渲染是未定义的，如第 4.2 节-页面框外的内容中的CSS Paged Media Module Level 3 中所述；
本规范没有定义如何处理位于页面框之外的框。
（也可以查看这个更早但更好的解释HTML print with absolute postitions）
所以浏览器巨头们在没有就标准达成一致的情况下会做什么，他们都会做一些不同的事情。发生的情况是整个精灵图像（不可见部分）沿着可打印页面区域的顶部、底部和侧面溢出，迫使浏览器决定如何处理和协调 CSS 和可打印页面区域。在浏览器中查看时，此浏览器更正不可见，因为它都是一页，并且图像可以毫无问题地溢出侧面限制。我将解释每个人在 2014 年 5 月 28 日之前所做的事情，以及最有可能发生这种情况的原因。
首先让我们使用处理最好的浏览器，
Internet Explorer！
（我敢打赌，虽然我还想说什么） 图像被正确剪裁，但被推开限制可打印区域的边缘，因此在打印输出时会出现在错误的位置。
Safari 和 Chrome 的行为类似，图像通过限制可打印区域边缘移动，但剪辑仍留在指定位置，因此指定错误或不显示图标。
Firefox 似乎通过仅在第一页上打印图标来处理这个最糟糕的情况，如果发生溢出，则强制所有剩余的图标在它存在的 div 或部分中彼此重叠地进入首页。 （有人可能会争辩说，这将 Firefox 排除在整体解决方案之外，但第一页可以正常工作的事实让我希望，如果我们问得好，Mozilla 将来会解决）
为什么我说这将适用于 80-90%？ 因为精灵的大小和与可打印区域的距离是 2 个决定因素，它们会因页面而异，并且应该只在大多数情况下，影响高达可打印区域的 20%。
在我的情况下，该图标被用于许多页面的大型列表中，因此几乎每个页面顶部的globe-icon 未对齐或图标错误，具体取决于哪个浏览器。
因为我知道这个页面会经常打印并且需要准确，所以我需要确保它在至少 99% 的时间内有效。我将通过从 sprite 中剪切出地球图标并将其插入而不需要所有额外的定位和剪切 CSS（这是此问题的原始最佳答案）来做到这一点。
那 1% 的用户仍然无法正确打印，我从可以正常工作的浏览器打印到 PDF 文件，然后可以下载和打印。
感谢阅读(@_@)
【讨论】：
来自 Bootstrap 的 mdo：“这是一张背景图片，打印时可能会被浏览器删除。”
【讨论】：
我也被这个问题难住了。我最终制作了我正在使用的字形的专用图像，而不是使用 glyphicon 系统。然后我使用@print 和:content 将图像注入到图标所在的位置。
@media print {
i.glyphicon-arrow-right{ content: url(../img/arrow.png) !important;}
}
【讨论】：
对于旧版本的 Bootstrap（例如 2.3.2），_reset.scss 底部有一个 @media print 块，无法改进浏览器打印 css 决策。所有最近的浏览器都允许您配置打印时是否需要背景图像。这被此块中的 * { background: transparent !important; } 行覆盖，即使您在打印对话框中选择了“打印背景图像”选项，也会破坏使用背景图像的图标库。
如果您使用的是最新的 Bootstrap 版本并且这仍然是一个问题，打印媒体 css 被分离到它自己的文件中，您可以使用 Bootstrap customizer 排除该文件。
【讨论】：