在 Chrome 中将浅色文本打印为深色文本

Question

我正在开发一个深色背景上有浅色文本的网页。当我尝试以黑白方式打印页面时，浏览器似乎会自动反转颜色，这样就不需要用满墨盒进行打印。这正是我所希望的。

当我尝试在 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>

Answer 1

您可以做的是创建所谓的打印样式表。这是一个正常的 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/

在 Chrome 中将浅色文本打印为深色文本

Print Light-Colored Text as Dark Text in Chrome

html

css

google-chrome

visual-web-developer-2010