在 Chrome 中将浅色文本打印为深色文本
Print Light-Colored Text as Dark Text in Chrome
我正在开发一个深色背景上有浅色文本的网页。当我尝试以黑白方式打印页面时,浏览器似乎会自动反转颜色,这样就不需要用满墨盒进行打印。这正是我所希望的。
当我尝试在 Firefox 中打印时,文本被转换为完全纯黑色。然而,在 Chrome 中,文本显得模糊,难以阅读。 Chrome 仍然以纯黑色打印页码、时间戳等。 我怎样才能 Chrome 以同样的纯黑色打印页面上的文本?
这是一个显示我正在使用的确切颜色的示例,它重现了我在实际页面上看到的行为。
<body>
<form id="form1">
<div>
<table style="background-color:#2D3541; width:900px; height:900px">
<tr>
<td style="font-size:medium; text-align:center; color:#B7DBFF">Sample Text</td>
</tr>
</table>
</div>
</form>
</body>
您可以做的是创建所谓的打印样式表。这是一个正常的 css 样式表,仅当用户尝试打印有问题的网页时才会加载。通常浏览器会忽略某些可能导致大量墨水浪费的 CSS 属性(比如页面有背景色),并通过假定背景为白色将文本转换为较深的颜色。
这可以通过创建新的打印样式表 <link rel="print" href="/css/print.css"
或使用媒体查询 @media print {...}
来覆盖
我发现使用单独的打印样式表更优惠,因为在用户打算打印页面之前浏览器不会加载它。
通过指定在您的打印样式表或媒体查询中引起问题的文本颜色,您应该能够解决浏览器不接受您的文本样式规则的问题。如果您要覆盖另一个样式表中设置的值,如果单独使用打印样式表无济于事,请尝试使用 !important
。
理想情况下,您应该给您的 td 一个 class,以便您进行更精细的控制。 style 属性中的值比样式表具有更高的优先级,并且 Chrome 在打印页面时可能仍然遵循内联样式属性。
@media print {
.light {
color: #000 !important;
}
}
Smashing Magazine 有一些关于印刷风格的重要资源:
https://www.smashingmagazine.com/2011/11/how-to-set-up-a-print-style-sheet/
我正在开发一个深色背景上有浅色文本的网页。当我尝试以黑白方式打印页面时,浏览器似乎会自动反转颜色,这样就不需要用满墨盒进行打印。这正是我所希望的。
当我尝试在 Firefox 中打印时,文本被转换为完全纯黑色。然而,在 Chrome 中,文本显得模糊,难以阅读。 Chrome 仍然以纯黑色打印页码、时间戳等。 我怎样才能 Chrome 以同样的纯黑色打印页面上的文本?
这是一个显示我正在使用的确切颜色的示例,它重现了我在实际页面上看到的行为。
<body>
<form id="form1">
<div>
<table style="background-color:#2D3541; width:900px; height:900px">
<tr>
<td style="font-size:medium; text-align:center; color:#B7DBFF">Sample Text</td>
</tr>
</table>
</div>
</form>
</body>
您可以做的是创建所谓的打印样式表。这是一个正常的 css 样式表,仅当用户尝试打印有问题的网页时才会加载。通常浏览器会忽略某些可能导致大量墨水浪费的 CSS 属性(比如页面有背景色),并通过假定背景为白色将文本转换为较深的颜色。
这可以通过创建新的打印样式表 <link rel="print" href="/css/print.css"
或使用媒体查询 @media print {...}
我发现使用单独的打印样式表更优惠,因为在用户打算打印页面之前浏览器不会加载它。
通过指定在您的打印样式表或媒体查询中引起问题的文本颜色,您应该能够解决浏览器不接受您的文本样式规则的问题。如果您要覆盖另一个样式表中设置的值,如果单独使用打印样式表无济于事,请尝试使用 !important
。
理想情况下,您应该给您的 td 一个 class,以便您进行更精细的控制。 style 属性中的值比样式表具有更高的优先级,并且 Chrome 在打印页面时可能仍然遵循内联样式属性。
@media print {
.light {
color: #000 !important;
}
}
Smashing Magazine 有一些关于印刷风格的重要资源:
https://www.smashingmagazine.com/2011/11/how-to-set-up-a-print-style-sheet/