printing - 打印中缺少 twitter 引导程序图标

Question

当我点击“打印”时，字形图标丢失，但在浏览器窗口中正确显示。我说的是一个带有静态内容的简单页面，除了最新的 twitter 引导程序。

是否可以在打印中显示 Bootstrap 图标？

score 7 · Accepted Answer

完整的 CSS 解决方案

我已经编写了一个 CSS 打印样式表解决方案，该解决方案应该解决 80-90% 的问题，这些问题发生在需要引导程序中的图标（字形图标）在打印时显示而无需用户在浏览器中打开“打印背景图像”的网站该解决方案适用于所有主流浏览器（Chrome、Safari、Firefox、IE）。

该解决方案详细参考了引导程序问题，但应该可以将其用于其他类似的背景图像问题，在需要时不打印。它还假设您使用的是单独的@media print {}样式表。我将解释它无法解决的 10-20% 的情况以及最后的原因（以及对这些情况的修复）。

和和属性专门用于定位和调整精灵图像的问题通过替换为、和属性background-image以及一些覆盖来解决。background-positionwidth heightcontent: url()clip: rect()margin-topmargin-left

就我而言，我们使用来显示国际可用课程的链接，因此用户经常打印此列表，但重要的指示信息已被浏览器删除。我找到了复制所有 CSS 以将图标显示到我们的打印样式表中的解决方案，同时将属性值添加 -webkit-print-color-adjust:exact;到

    [class^="icon-"], [class*="icon-"] {
    背景图像：url（“../img/glyphicons-halflings.png”）；
    背景位置：14px 14px；
    背景重复：不重复...  
    }

但这仅解决了 Chrome 和 Safari 中的问题，社区没有任何迹象表明 Firefox 或 IE 很快就会支持这个 webkit 属性。

所以我们需要彻底改变浏览器将页面发送到打印机驱动程序时的渲染方式。

执行精灵的标准方法是声明一个可见的开放空间（在这种情况下为 14 像素 x 14 像素），然后重新定位该background-image空间的后面，以便适当的图标可以显示出来。

为了在前景中有效地复制这一点，我们将使用content: url()调用图像，然后clip: rect()将此图像剪切为适当的图标，然后使用负值margin-top并将margin-left新的前景图像定位到背景图像图标最初放置的位置。

一个困难是使用剪辑切割图像需要 4 个坐标（上、右、下、左），而background-position只需要 2 个坐标（xpos、ypos - 距左上角的像素距离）。使用该clip属性的另一个困难是不同的padding或margin这些坐标不是从它们各自的外部边界计算的，而是仅从顶部和左侧计算的，这实际上使我们的数学转换background-position更容易一些，但可能需要一些时间来适应。

有关剪辑属性的更多信息
（由于我的声誉低，链接用完了，所以你需要弄清楚我做了什么鬼鬼祟祟的事情）
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/

实际代码

回到例子，我们要转换

    [class^="icon-"], [class*="icon-"] {
    显示：内联块；
    宽度：14px；
    高度：14px；
    *margin-right: .3em;
    行高：14px；
    垂直对齐：文本顶部；
    背景图像：url（“../img/glyphicons-halflings.png”）；
    背景位置：14px 14px；
    背景重复：不重复；
    }
    //跳过其他图标...

    .icon-地球 {
    背景位置：-336px -144px；
    }

在打印样式表中

    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, top+14px, left)相同。

然后我们使用原始否定background-position: left top;作为margin-leftand 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路径，宽度和高度，如果人们要求这些详细信息，我将在这些单元格中使用确切的公式进行更新，但现在这里是结果（在更聪明地替换记事本 ++ 中的所有命令以删除整数和 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/问题/4412

当它不起作用时

现在，任何通过使用打印样式表而不是屏幕在浏览器窗口中查看来测试过这一点的人都会看到它工作得很好，正如我之前所说，据我所知，这个解决方案除了 10%-20% 的情况外都可以工作. 此解决方案的例外情况只会在实际打印页面（或打印到文件以进行无纸调试）时出现。

position: absolute;发生的情况是，由于使用属性所需的属性，新的前景图像精灵可能会溢出可打印区域之外clip。当涉及到 W3C 标准时，这些图像的呈现是未定义的，如CSS Paged Media Module Level 3中第 4.2 节-页面框外的内容中所述；

该规范没有定义如何处理位于页面框之外的框。

（也可以查看这个更旧但更好的解释HTML print with absolute postitions）

那么，浏览器巨头们在没有就标准达成一致的情况下会做什么，他们都会做一些不同的事情。发生的情况是整个精灵图像（不可见部分）沿着可打印页面区域的顶部、底部和侧面溢出，迫使浏览器决定如何处理和协调 CSS 和可打印页面区域。在浏览器中查看时，此浏览器更正不可见，因为它都是一页，并且图像可以毫无问题地溢出侧面限制。我将解释每个人在 2014 年 5 月 28 日之前所做的事情，以及最有可能发生这种情况的原因。

首先让我们使用处理它最好的浏览器，

IE浏览器！

（我敢打赌，虽然我还想说什么）图像被正确裁剪，但被推离了限制可打印区域的边缘，因此在打印输出时会出现在错误的位置。

Safari 和 Chrome 的行为相似，图像通过限制可打印区域边缘移动，但剪辑保留在指定位置，因此指定错误或不显示图标。

Firefox 似乎通过仅在第一页上打印图标来处理这个最糟糕的情况，如果发生溢出，则强制所有剩余的图标在它存在的 div 或部分中彼此重叠地进入首页。（有人可能会争辩说，这将 Firefox 排除在整体解决方案之外，但第一页有效的事实让我希望，如果我们问得好，Mozilla 将来会解决）

为什么我说这对 80-90% 有效？ 因为精灵的大小和与可打印区域的距离是 2 个决定因素，它们会因页面而异，并且在大多数情况下最多只能影响可打印区域的 20%。

针对这 10-20% 事件的解决方案

在我的情况下，该图标被用于许多页面的大型列表中，因此globe-icon几乎每个页面顶部的图标都未对齐或图标错误，具体取决于哪个浏览器。因为我知道这个页面会经常打印并且需要准确，所以我需要确保它在至少 99% 的时间内有效。我将通过从精灵中剪下地球图标并插入它来完成此操作，而无需所有额外的定位和剪辑 CSS（这是此问题的原始最佳答案）。

    i.icon-globe::after{
     内容： url('../img/globe-glyphicon.png')!important;
    }

那 1% 的用户仍然无法正确打印，我从可以正常工作的浏览器打印到 PDF 文件，然后可以下载和打印。

感谢阅读 （@_@）

score 2 · Accepted Answer

来自 Bootstrap 的 mdo：“这是一张背景图片，打印时它们可能会被浏览器删除。”

https://github.com/twitter/bootstrap/issues/4412

score 1 · Accepted Answer

我也被这个问题难住了。我最终制作了我正在使用的字形的专用图像，而不是使用 glyphicon 系统。然后我使用@printand:content将图像注入图标应该在的任何位置。

@media print {
    i.glyphicon-arrow-right{ content: url(../img/arrow.png) !important;}
}

score 0 · Accepted Answer

对于旧版本的 Bootstrap（例如 2.3.2），@media print底部有一个块_reset.scss无法改进浏览器打印 css 决策。所有最近的浏览器都允许您配置打印时是否需要背景图像。这被* { background: transparent !important; }此块中的一行覆盖，即使您在打印对话框中选择了“打印背景图像”选项，也会破坏使用背景图像的图标库。

如果您使用的是最新的 Bootstrap 版本并且这仍然是一个问题，则打印媒体 css 被分离到它自己的文件中，您可以使用Bootstrap 定制器将其排除。

printing - 打印中缺少 twitter 引导程序图标

4 回答 4

完整的 CSS 解决方案

实际代码

当它不起作用时

针对这 10-20% 事件的解决方案

Related

Reference