在Chrome中将浅色文本打印为深色文本 [英] Print Light-Colored Text as Dark Text in Chrome
问题描述
我正在开发一个在深色背景上具有浅色文本的网页.当我尝试以黑白方式打印页面时，浏览器似乎会自动将颜色反转，以使打印时不需要用完整个墨盒.这正是我所希望的.
I am developing a web page that has light colored text on a dark background. When I try to print the page in black and white, the browser seems to automatically be inverting the colors so that it doesn't take a full cartridge to print. This is exactly what I was hoping for.
当我尝试在Firefox中打印时，文本将转换为纯黑色.但是，在Chrome浏览器中，文字显得微弱，难以阅读. Chrome仍会以纯黑色打印页码，时间戳记等. 如何让Chrome浏览器以相同的纯黑色打印页面上的文本?
When I try to print in Firefox, the text is converted to a fully solid black. In Chrome, however, the text appears faint, and that is making it hard to read. Chrome still prints page numbers, time stamps, etc in the full solid black. How can I get Chrome to print the text on my page in that same full solid black?
这里有一个示例，显示了我正在使用的确切颜色，它重现了我在实际页面上看到的行为.
Here's a sample showing the exact colors I'm using, and it reproduces the behavior I'm seeing on my actual page.
<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属性，这些属性可能导致浪费大量墨水(例如页面具有背景色)，并通过假设背景为白色将文本转换为较深的颜色.
What you can do is create what's known as a Print Stylesheet. This is a normal css stylesheet loaded in only when the user tries to print the web page in question. Normally browsers will aim to ignore certain CSS attributes which could lead to large amounts of ink being wasted (say the page has a background colour) and convert text to darker colours by assuming the background is white.
可以通过创建新的打印样式表<link rel="print" href="/css/print.css"或使用媒体查询@media print {...}
This can be overridden by creating a new print stylesheet <link rel="print" href="/css/print.css" or using media query @media print {...}
我发现优先使用单独的打印样式表，因为浏览器在用户打算打印页面之前不会加载它.
I find using a separate print stylesheet preferential as browsers won't load it until the user is intending to print the page.
通过在打印样式表或媒体查询中指定引起问题的文本的颜色，您应该能够解决浏览器未选择文本样式规则的问题.如果您要覆盖另一个样式表中的值集，请尝试使用!important，如果仅使用打印样式表无济于事.
by specifying the color of the the text that's causing issue in your print stylesheet or media query, you should be able to resolve issues where browsers aren't picking up your text style rules. If you're overriding a value set in another stylesheet, experiment with the use of !important if using a print stylesheet alone doesn't help things.
理想情况下，您应该给td一个类，以提供更精细的控制.样式属性中的值比样式表具有更高的优先级，并且在打印页面时，Chrome可能仍然偏爱内联样式属性.
Ideally you should give your td a class to give you more granular control. Values in the style attribute take a higher priority than stylesheets, and Chrome may still be honouring the inline style attribute when the page is printed.
@media print {
.light {
color: #000 !important;
}
}
Smashing Magazine在印刷风格方面有很多资源:
Smashing Magazine has some great resources on print styles:
https://www .smashingmagazine.com/2011/11/how-to-set-up-a-print-style-sheet/
这篇关于在Chrome中将浅色文本打印为深色文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
