灰色字体彩色印刷
Posted
技术标签:
【中文标题】灰色字体彩色印刷【英文标题】：Grey Font Color Printing 【发布时间】：2011-11-28 18:19:41 【问题描述】：有什么方法可以确保我的灰色字体颜色不会变黑？
Firefox 和 Chrome 似乎这样做是为了防止黑底白字变成白底白字。我没有背景颜色（白色除外），所以这个浏览器级别的转换没有用，它只能帮助无缘无故地防止灰色。
有没有办法关闭它？还是我应该坚持使用不透明度、浏览器检测和灰色着色等技术...
【问题讨论】：
你在使用打印样式表吗？ 我一直认为黑色是强制的，因为空白墨水打印速度更快，而且比打印灰色便宜，因为这需要使用彩色墨水。 不透明度听起来是一种很棒的技术——如果一切都失败了，我会求助于那个或 PDF。 @George 很公平 - 但请记住，您可以使用iframe 嵌入 PDF，并带有“打印”按钮和一切。 （以防万一你需要回到这个）
软件将灰色文本转为黑色的原因是黑色激光打印机需要光栅灰色。光栅图案结果（尤其是在低分辨率打印机中）会导致文本外观模糊。打印全黑时，不需要光栅，使用原始字形矢量路径。创建打印样式表时，明智的做法是考虑场景和打印机功能。喷墨打印机抖动文本。混合颜色。他们有更多的“滴答声”来获得正确的外观。
【参考方案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 >
<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 小时后可以找到的，并且对我有用。
【讨论】：
以上是关于灰色字体彩色印刷的主要内容，如果未能解决你的问题，请参考以下文章
具有自定义 UIActivity 的 UIActivityViewController 将彩色图像显示为灰色
fireworks将两个图层组合为蒙版后，原来的彩色图像变成了灰色，请教高手这是怎么回事啊？
Python 中将 3 通道 rgb 彩色图像更改为 1 通道灰色的速度有多快？
彩色激光打印机（PCL6 驱动程序）打印灰色图形或图像偏色的现象