我可以强制文本打印为白色吗？

Question

假设我有一些文字显示在图像或其他一些可打印的颜色上。打印时是否可以将此文本强制为白色？默认行为是在大多数浏览器中强制白色为黑色或灰色。当您在带有背景颜色/图像的容器中打印文本时，这显然是有意义的，但是在您将图像上的文本重叠的情况下强制文本是没有意义的。

我应该提一下，我非常了解打印样式表，只是不管设置字体颜色，在IE / chrome / firefox中，字体都不会显示为白色。根据浏览器的不同，它会变成黑色或灰色。如果您认为实际可能，请在图像上显示白色文本示例。

举例说明：

http://jsfiddle.net/NSwYE/

由于印刷方式的原因，我个人认为不可能。这非常令人讨厌。

Answer 1

这并不完全控制网页作者。

例如，this fiddle将在

中的三个黑色背景中的任意一个上打印（至少在戴尔1720激光打印机上为我做的）白色文本

IE9

如果 用户 已选中旁边的框：

  

工具 - ＆gt;打印 - ＆gt;页面设置 - ＆gt; “打印背景颜色和图像”

如果未选中该框，则它将不会在前两个框中打印黑色，但将在最后一个上打印（因为它是img标记），但它将文本打印为灰色，甚至超过img标签。因此，似乎“打印背景颜色和图像”的设置会影响浏览器解释文本的方式，如果选中则会允许真正的白色（敲除效果），但如果未选中则不会。

火狐

这里找到的复选框（似乎有效）：

  

档案 - ＆gt;页面设置 - ＆gt; “打印背景（颜色和图像）”

对于Chrome？网页作者受控？

我尚未验证来自this post的信息是否会执行此操作（它在my next fiddle上对我不起作用，但可能是因为它位于iframe中）。对于应在Chrome中打印的元素，请尝试设置：

-webkit-print-color-adjust: exact;

Answer 2

标记答案是错误的。 您可以在每个浏览器中控制文本颜色！您只需要在svg中输出文本。浏览器不会改变svg中的颜色。这是一个例子：

<svg height="40" width="200">
   <text font-size="28px" y="25" x="30" fill="#ffffff" >
   Some text
   </text>
</svg>

Answer 3

print.css会帮助你，Eric meyer有一个post关于它。

例如html5boilerplate在his css上使用此样式：

@media print {
  * { background: transparent !important; color: black !important; box-shadow:none !important; text-shadow: none !important; } /* Black prints faster: h5bp.com/s */
  a, a:visited { text-decoration: underline; }
  a[href]:after { content: " (" attr(href) ")"; }
  abbr[title]:after { content: " (" attr(title) ")"; }
  .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } /* Don't show links for images, or javascript/internal links */
  pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
  thead { display: table-header-group; } /* h5bp.com/t */
  tr, img { page-break-inside: avoid; }
  img { max-width: 100% !important; }
  @page { margin: 0.5cm; }
  p, h2, h3 { orphans: 3; widows: 3; }
  h2, h3 { page-break-after: avoid; }
}

<强>更新

使用您的示例html：

<img src="http://www.clipart.dk.co.uk/DKImages/Halloween/image_halloween002.jpg" alt="black cat">
<div id="sometext">Cat</div>

和我的css：

#sometext {
    position: absolute;
    top: 125px;
    left: 220px;
    color: #FFF; 
}

@media only print {

#sometext {
    color: #FFF !important;
    /* actually trick with white text-shadow not work ( */
    text-shadow: 0 0 3px #FFF !important;
}

}

我得到this demo。这是一个可以接受的解决方案吗？

    

Answer 4

<强>解决方案：

    @media print {
      h1 {
        color: rgba(0, 0, 0, 0);
        text-shadow: 0 0 0 #fff;
      }

      @media print and (-webkit-min-device-pixel-ratio:0) {
        h1 {
          color: #fff;
          -webkit-print-color-adjust: exact;
        }
      }
   }

Answer 5

示例http://jsfiddle.net/NSwYE/为我打印白色文本。但我使用的是Firefox 3.6和Brother激光打印机。

打印机的行为完全取决于打印机驱动程序和应用程序。我的打印机将使用Firefox正确打印示例。它将正确打印Microsoft Publisher中的灰度文本。它不会在Microsoft Word中打印灰度文本：文本始终为黑色。

Answer 6

可能，如果您使用特定于打印的样式表来对其进行样式设置。

e.g。

<link href="print.css" rel="stylesheet" media="print" />

Answer 7

这可能有点矫枉过正，但如果这是您需要反复进行的，您可以考虑使用canvas或SVG生成内容（Raphael.js将提供IE支持）。 canvas和SVG / VML元素都将在主要浏览器中以精确的颜色打印。

Answer 8

/* Text color */
.element
{
   color:transparent; 
   text-shadow:0 0 0 #fff; 
}

/* Background color */
.element
{
   box-shadow:0 0 0 1000px #000 inset; 
}

在Internet Explorer中，您需要启用后台打印。在Chrome 70，Firefox 60（具有禁用的后台打印功能）和IE11中进行了测试。

因为不使用SVG，所以不需要计算SVG宽度。