Question

我正在用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。

Answer 1

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

Firefox打印页面-白色字体颜色被替换为较深的颜色

1 个答案: