我正在HTML中创建报告，并希望用户能够通过浏览器本机打印功能下载它们为PDF。IE CTRL P或CMD P
在Firefox中打印时，我发现了一个问题，浏览器似乎不允许以白色字体颜色打印。
预期行为：
假设我有一个带有紫色背景色和白色文本的基本div。我希望浏览器能够完全像这样渲染该元素，并将页面打印到PDF。
实际行为：
仅在Firefox中，浏览器会更改任何被认为太轻而无法黑色的字体。这可能是白色的字体颜色或接近白色的任何颜色，即浅灰色。
CSS或其他我可以强迫将其打印到PDF上任何白色字体颜色完全白色的方法吗？
值得注意的是：我在Firefox上没有在元素上呈现背景颜色的类似问题，我通过在没有背景颜色渲染的元素上使用以下CSS规则来解决这个问题修复轻字体颜色问题：
-webkit-print-color-adjust: exact;
color-adjust: exact;
我还提供了一些代码，以便能够复制此问题：
<html>
</head>
<body>
<section class="purple">
<div class="page">
<div class="oval single">day-to-day</div>
</div>
</section>
<style>
.oval {
position: absolute;
width: 300px;
height: 60px;
top: 45px;
right: -50px;
border-radius: 50%;
color: #ffffff!important;
text-align: left;
line-height: 24px;
opacity: 0.4;
padding: 15px 15px 15px 50px;
}
.oval span {
color: #ffffff!important;
}
.oval.sub{
top: 108px;
}
.oval.single{
top: 80px;
}
.page {
font-size:24px;
line-height: 34px;
position: relative;
width:1160px;
height:1671px;
padding:100px;
page-break-after: always;
color:#595959;
}
*, body {
-webkit-print-color-adjust: exact !important;
font-family: 'Source Sans Pro', 'Arial', sans-serif;
}
.purple .oval {
background-color: #3c0c5b;
-webkit-print-color-adjust: exact;
color-adjust: exact;
}
</style>
</body>
</html>
如果将其保存到HTML文件中，然后尝试通过CTRL P或CMD P打印页面，您将看到它像HTML一样在浏览器中呈现，但在PDF中不应该呈现。
一个解决方法是将文本设置为透明，然后将文本阴影设置为所需的打印颜色。
我使用此解决方案在Firefox 70.0.1中取得了成功。
<style>
.oval {
position: absolute;
width: 300px;
height: 60px;
top: 45px;
right: -50px;
border-radius: 50%;
color: transparent;
text-shadow: 0 0 0px #fff;
text-align: left;
line-height: 24px;
opacity: 0.4;
padding: 15px 15px 15px 50px;
}
...
</style>
https://codepen.io/joshmatt/pen/joozrev