gpt4 book ai didi

html - Firefox 打印页面 - 白色字体颜色被覆盖为较深的颜色

转载 作者:太空宇宙 更新时间:2023-11-04 06:24:16 25 4
gpt4 key购买 nike

我正在用 html 创建报告,并希望用户能够通过浏览器的 native 打印功能将它们下载为 PDF。即 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

关于html - Firefox 打印页面 - 白色字体颜色被覆盖为较深的颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55221501/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com