Страница печати Firefox - белый шрифт перекрашивается в более темный цвет - PullRequest
0 голосов
/ 18 марта 2019

Я создаю отчеты в формате 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.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...