灰色字体彩色印刷答案

【问题标题】：Grey Font Color Printing灰色字体彩色印刷
【发布时间】：2011-11-28 18:19:41
【问题描述】：

有什么方法可以确保我的灰色字体颜色不会变黑？

Firefox 和 Chrome 似乎这样做是为了防止黑底白字变成白底白字。我没有背景颜色（白色除外），所以这个浏览器级别的转换没有用，它只能帮助无缘无故地防止灰色。

有没有办法关闭它？还是我应该坚持使用不透明度、浏览器检测和灰色着色等技术...

【问题讨论】：

你在使用打印样式表吗？
我一直认为黑色是强制的，因为空白墨水打印速度更快，而且比打印灰色便宜，因为这需要使用彩色墨水。
不透明度听起来是一种很棒的技术——如果一切都失败了，我会求助于那个或 PDF。
@George 很公平 - 但请记住，您可以使用 iframe 嵌入 PDF，并带有“打印”按钮和一切。（以防万一你需要回到这个）
软件将灰色文本转为黑色的原因是黑色激光打印机需要光栅灰色。光栅图案结果（尤其是在低分辨率打印机中）会导致文本外观模糊。打印全黑时，不需要光栅，使用原始字形矢量路径。创建打印样式表时，明智的做法是考虑场景和打印机功能。喷墨打印机抖动文本。混合颜色。他们有更多的“滴答声”来获得正确的外观。

标签： html printing fonts colors cross-browser

【解决方案1】：

解决方案：

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

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

【讨论】：

有效！你真是个天才！ Here's a demonstration. 在 IE11、Chrome 和 Firefox 中测试。
确保不要尝试使用“透明”而不是“rgba(0, 0, 0, 0)”，因为它不适用于 IE。
今天在 Chrome 中为我工作，但在 FF 中不可用。

【解决方案2】：

我发现不得不：

将 !important 添加到 css 规则中... and...
在 Firefox 打印对话框中，勾选“外观：打印背景颜色”选项

我无法让它在 Chrome 中运行。

【讨论】：

抱歉，不太准确。即使不执行选项 1，选项 2 也有效。
@GeorgeBailey，这不是我在 OSX 上的 FireFox v24 中看到的这个页面：awesometimer.com/results/nightingale_nightmare 如果我删除“！important”规则，奖杯都印成黑色（奖杯只是fontawesome 中的字符）。
在我的 Firefox 中，如果您转到“文件”->“页面设置”，并选中“打印背景颜色和图像”框，那么您的奖杯将打印为灰色。我在 Windows 7 上使用 Firefox 24。

【解决方案3】：

如果您添加颜色，某些浏览器会更加尊重您的灰色：将 #777 替换为 #778。警惕不透明性。有时，即使打印预览会显示出很好的效果，它实际上也只适用于选定的打印机。如果使用 opacity 是灰色的，那么带有不幸固件的打印机将根本无法打印您的文本。

【讨论】：

对于那些追随我的人；我处于这种不透明后备非常适合我的情况。我只想在颜色不变的情况下显示某些内容，因此我更改了可以隐藏或不透明度变灰的内容。 :)

【解决方案4】：

你只需要在 svg 中输出你的灰色字体。浏览器不会改变 svg 中的颜色。这是一个例子：

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

【讨论】：

【解决方案5】：

我认为这是该页面上唯一的 div。进行以下更改，它应该可以正常工作。

<style>
@media print {
div.red {
      color: #cccccc !important;
  }
</style>

然后像下面这样改变 div 标签的 html

【讨论】：

【解决方案6】：

我发现TEXT颜色不是由“通用”样式表继承的，而是必须在打印css文件中再次强制。

换句话说，即使在通用 css 文件中设置了文本颜色（具有media='all' 属性的文件），打印时也会被忽略，至少在 Firefox 和 Chrome 中是这样。

我发现在打印 css 文件（带有media='print' 属性的文件）中再次写入（冗余但......必要）文本颜色，现在将考虑颜色。

【讨论】：

我想知道为什么我不能让它工作。一个示例页面会很有趣。

【解决方案7】：

此解决方案适用于所有浏览器：

.text{ color: transparent; text-shadow: 2px 0 #red; }

【讨论】：

【解决方案8】：

重视颜色：

.bgcol{
background-color:skyblue !important;
}
 .subject_content,h2,p{
 color:rgba(255, 255, 255) !important;
    margin: 25px auto;

}
<body class="bgcol">
       <div class="subject_content">
      <h2 class='text-center'>fhddfhnt area</h2>
      <p>sdgdfghdfhdfh.</p>
     </div>

【讨论】：

【解决方案9】：

上面没有对我有用，所以我终于想通了。

始终为直接元素赋予颜色。前任。假设你的 html 是

<div class='div'><br/>
      < h1>Text< /h1><br/>
</div>

和你的 CSS

.div { 
     color: #ccc; 
    }

这就是我的情况。在这种情况下，无论您做什么，颜色都不会显示。

你必须这样做

.div h1 { 
 color: #ccc; 
}

@media print { 
 .div h1 { 
    -webkit-print-color-adjust: exact; 
   } 
}

希望对你有帮助！！

如果您找到更好的解决方案，请回复，因为这是我在 2 小时后可以找到的，并且对我有用。

【讨论】：