web-dev-qa-db-fra.com

Impression de couleur de police grise

Existe-t-il un moyen de s’assurer que mes couleurs de police grises ne deviennent pas noires?

Firefox et Chrome semblent le faire pour empêcher le texte blanc sur fond noir de devenir blanc sur blanc. Je n’ai pas de couleur d’arrière-plan (sauf le blanc), cette conversion au niveau du navigateur n’est donc pas utile, elle permet uniquement d’empêcher les couleurs grises sans aucune raison.

Y a-t-il un moyen de désactiver cela? Ou devrais-je simplement m'en tenir à des techniques telles que l'opacité, la détection de navigateur et la coloration de mes gris?.

htmlprintingfontscolorscross-browser
26
George Bailey

Solution: 

  @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;
        }
      }
   }
29
Nazar Vynnytskyi

J'ai trouvé devoir:

  1. Ajoutez !important à la règle css ... et ...

  2. Dans la boîte de dialogue d'impression de Firefox, cochez l'option "Apparence: imprimer les couleurs d'arrière-plan". 

Je ne pouvais pas le faire fonctionner dans Chrome.

6
matt burns

Certains navigateurs ajoutent plus de respect à votre gris si vous ajoutez de la couleur: Remplacez #777 par #778. Méfiez-vous de l'opacité. Parfois, même si l'aperçu avant impression donne de bons résultats, il ne fonctionne que sur certaines imprimantes. Les imprimantes avec des microprogrammes malchanceux n'imprimeront pas votre texte s'il est gris opaque.

3
George Bailey

Vous avez juste besoin de sortir votre police grise en svg. Les navigateurs ne changent pas de couleur dans svg. Voici un exemple:

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

J'ai trouvé que TEXT color n'hérite pas de la feuille de style "general purpose" , mais doit être forcé à nouveau dans le fichier print css.

En d'autres termes, même si la couleur du texte est définie dans le fichier css général (un avec l'attribut media='all'), elle est ignorée lors de son impression, au moins dans Firefox et Chrome.

J'ai trouvé qu'en écrivant à nouveau (redondant mais ..... nécessaire) la couleur du texte dans le fichier d'impression CSS (un avec l'attribut media='print'), la couleur sera maintenant prise en compte.

1
Luca Detomi

Donner de l'importance à la couleur:

.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
mano

Rien de ce qui précède ne fonctionnait pour moi, alors j'ai finalement compris.

Toujours donner des couleurs aux éléments directs. Ex. Supposons que votre code HTML est

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

et votre CSS

.div { 
     color: #ccc; 
    }

C'était mon cas. Dans ce cas, peu importe ce que vous faites, la couleur ne sera pas affichée.

Tu dois faire 

.div h1 { 
 color: #ccc; 
}

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

J'espère que cela vous aide !!

S'il vous plaît répondez si vous trouvez une meilleure solution car c'est ce que j'ai pu trouver après 2 heures et cela fonctionne pour moi.

0
entersid

Cette solution fonctionne dans tous les navigateurs:

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

0
Victor Batista