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提供一个类，以便为您提供更精细的控制。 style属性中的值比样式表具有更高的优先级，Chrome可能仍然在打印页面时遵循内联样式属性。

@media print {
    .light {
        color: #000 !important;
    }
}

Smashing Magazine在打印样式方面有一些很好的资源：

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

1 个答案: