灰色字体颜色打印

Question

灰色字体颜色打印

htmlprintingfontscolorscross-browser

34

有没有办法确保我的灰色字体不变黑？

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

有方法关闭这个功能吗？还是我应该坚持使用透明度、浏览器检测和给我的灰色着色……

- 700 Software

你是否在使用打印样式表？ - CamelCamelCamel

1

我一直认为黑色是被强制使用的，因为黑色墨水打印速度更快，而且比灰色打印更便宜，因为灰色需要使用彩色墨水。 - thirtydot

不透明度听起来像是一种很棒的技术 - 如果其他方法都失败了，我会采用这种方法或者使用PDF。 - Pekka

1

@George 确实可以，但记住你可以使用“iframe”嵌入PDF，带有“打印”按钮和所有功能。（以防你需要回来查看） - Pekka

2

软件将灰色文本转换为黑色的原因是黑色激光打印机需要栅格化灰色。栅格图案结果（特别是低分辨率打印机）会导致模糊的文本外观。在打印全黑时，不需要栅格，使用原始字形矢量路径即可。创建打印样式表时，考虑情景和打印机功能是明智的选择。喷墨打印机会对文本进行抖动。混合颜色。它们有更多的“刻度”来获得正确的外观。 - allcaps

显示剩余3条评论

9个回答

6

我发现必须要：

在 CSS 规则中添加 !important……并且……
在 Firefox 打印对话框中勾选“外观：打印背景颜色”选项。

在 Chrome 中我无法让它工作。

- matt burns

抱歉，不是很准确。即使没有执行选项1，选项2也可以正常工作。 - 700 Software

@GeorgeBailey，这不是我在OSX上使用FireFox v24浏览器查看此页面http://www.awesometimer.com/results/nightingale_nightmare/时看到的情况：如果我删除“！important”规则，则所有奖杯都会以黑色打印（奖杯只是fontawesome中的字符）。 - matt burns

1

在我的Firefox中，如果你进入“文件”->“页面设置”，并勾选“打印背景颜色和图像”的复选框，那么你的奖杯将会以灰色打印。我使用的是Windows 7上的Firefox 24。 - 700 Software

4

我以为那是页面上唯一的div。进行以下更改，就可以正常运行了。

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

将 div 标签的 HTML 更改如下：

- suraj kumar

3

一些浏览器在你添加颜色时会更尊重你的灰度，将#777替换为#778。注意透明度。有时，即使打印预览显示的结果很好，但只在选择的打印机上有效。对于使用不幸固件的打印机，如果使用透明度使文本变灰，它们将完全无法打印。

- 700 Software

1

对于那些在我之后的人们；我处于这种不透明度回退非常适合我的情况下。我想要的是只有当颜色没有改变时才显示某些内容，所以我使用可以隐藏或变灰的不透明度来实现。 :) - SoreThumb

3

您只需要在 SVG 中输出灰色字体即可。浏览器不会在 SVG 中改变颜色。这里是一个例子：

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

- Jehy

1

我发现通用样式表没有继承文本颜色，但必须在打印CSS文件中再次强制设置。

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

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

- Luca Detomi

1

我不知道为什么我无法让它工作。看一个示例页面会很有趣。 - 700 Software

1

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

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

- Victor Batista

1

重视颜色：

.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>

- manoj kumar

0

对我来说，以上所有方法都没有起作用，所以我最终找到了解决方法。

始终为直接元素指定颜色。例如，假设您的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; 
   } 
}

希望这可以帮到你！！

如果你找到更好的解决方案，请回复我，因为这是我在两个小时后找到并适用于我的方案。

- entersid

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Nazar Vynnytskyi · Accepted Answer

解决方案：

  @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;
        }
      }
   }