时间戳

首页 > 解决方案 > Firefox 打印页面 - 白色字体颜色覆盖为较深的颜色

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

问题描述

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

标签： htmlcssfirefox

解决方案

一种解决方法是将文本设置为透明，然后将 text-shadow 设置为所需的打印颜色。
使用此解决方案，我在 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

推荐阅读