Цветная печать серого шрифта - PullRequest
Новая
       18

Цветная печать серого шрифта

27 голосов
/ 01 октября 2011

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

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

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

Ответы [ 8 ]

32 голосов
/ 23 апреля 2014

Решение: 

  @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;
        }
      }
   }
6 голосов
/ 25 октября 2013

Я нашел, должен был:

  1. Добавить !important к правилу css ... и ...

  2. В диалоговом окне печати Firefox установите флажок «Внешний вид: цвета фона печати»

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

3 голосов
/ 11 августа 2015

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

<svg height="40" width="200">
   <text font-size="28px" y="25" x="30" fill="#ffffff" >
   Some text
   </text>
</svg>
3 голосов
/ 18 января 2013

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

1 голос
/ 07 ноября 2014

Я обнаружил, что TEXT-цвет не наследуется таблицей стилей "общего назначения" , но должен быть снова принудительно введен в файл print css.

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

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

0 голосов
/ 12 декабря 2018

Придайте значение цвету: 

.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>
0 голосов
/ 25 октября 2018

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

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

0 голосов
/ 15 апреля 2016

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

Всегда задавайте цвета прямым элементам. 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 часа, и оно работает для меня.

...