Серая печать шрифтов

Есть ли способ гарантировать, что мои серые цвета шрифтов не станут черными?

Firefox и Chrome, похоже, делают это, чтобы белый текст на черном фоне не превращался в белый на белом фоне. У меня нет цвета фона (кроме белого), поэтому это преобразование на уровне браузера не полезно, оно помогает только в предотвращении серого цвета без каких-либо причин.

Есть ли способ отключить это? Или я должен просто придерживаться таких методов, как непрозрачность, обнаружение браузера и окраска серых...

Ответ 1

Решение:

  @media print {
      h1 {
        color: rgba(0, 0, 0, 0);
        text-shadow: 0 0 0 #ccc;
      }

      @media print and (-webkit-min-device-pixel-ratio:0) {
        h1 {
          color: #ccc;
          -webkit-print-color-adjust: exact;
        }
      }
   }

Ответ 2

Мне приходилось:

Добавьте !important в правило css... и...
В диалоговом окне печати Firefox отметьте опцию "Внешний вид: печать цветов фона"

Я не мог заставить его работать в Chrome.

Ответ 3

Некоторые браузеры добавляют больше уважения к вашему серому, если вы добавляете цвет: Замените #777 на #778. Будьте осторожны с непрозрачностью. Иногда, даже если предварительный просмотр печати покажет отличные результаты, он фактически работает только на некоторых принтерах. Принтеры с несчастливой прошивкой не смогут распечатать ваш текст вообще, если он серый, используя непрозрачность.

Ответ 4

Вам просто нужно вывести серый шрифт в svg. Браузеры не меняют цвет в svg. Вот пример:

<svg height="40" width="200">
   <text font-size="28px" y="25" x="30" fill="#ffffff" >
   Some text
   </text>
</svg>

Ответ 5

Я обнаружил, что цвет ТЕКСТ не наследуется таблицей стилей общего назначения, но должен быть принудительно снова использован в файле css для печати.

Другими словами, даже если цвет текста задан в общем файле css (один с атрибутом media='all'), он игнорируется при печати, по крайней мере, в Firefox и Chrome.

Я обнаружил, что запись снова (избыточный, но..... необходимый) цвет текста в файле css для печати (один с атрибутом media='print'), цвет будет рассмотрен.

Ответ 6

Ничего выше не работало для меня, поэтому я, наконец, понял это.

Всегда выделяйте цвета для прямых элементов. Ex. Предположим, что ваш html

<div class='div'><br/>
      < h1>Text< /h1><br/>
</div>

и ваш CSS

.div { 
     color: #ccc; 
    }

Это был мой случай. В этом случае независимо от того, что вы делаете, цвет не будет отображаться.

Вы должны сделать

.div h1 { 
 color: #ccc; 
}

@media print { 
 .div h1 { 
    -webkit-print-color-adjust: exact; 
   } 
}

Надеюсь, это поможет вам!

Пожалуйста, ответьте, если вы найдете лучшее решение, поскольку это то, что я смог найти через 2 часа, и это работает для меня.

Ответ 7

Это решение работает во всех браузерах:

.text{ color: transparent; text-shadow: 2px 0 #red; }

Ответ 8

Дайте важность цвету:

.bgcol{
background-color:skyblue !important;
}
 .subject_content,h2,p{
 color:rgba(255, 255, 255) !important;
    margin: 25px auto;

}
<body class="bgcol">
       <div class="subject_content">
      <h2 class='text-center'>fhddfhnt area</h2>
      <p>sdgdfghdfhdfh.</p>
     </div>

Ответ 9

Я думал, что это единственный div на этой странице. Внесите следующее изменение, оно должно работать нормально.

<style>
@media print {
div.red {
      color: #cccccc !important;
  }
</style>

И измените HTML тега div, как показано ниже