2011-09-30 4 views
24

est-il un moyen de faire en sorte que mes couleurs de police gris ne noircit pas?Gris Couleur de police d'impression

Firefox et Chrome semblent le faire afin d'éviter un texte blanc sur fond noir de se transformer en blanc sur blanc. Je n'ai pas une couleur de fond (sauf blanc), de sorte que cette conversion au niveau du navigateur n'est pas utile, il aide à prévenir que des couleurs grises pour aucune raison.

est-il un moyen de désactiver cette? Ou dois-je simplement coller avec des techniques comme l'opacité, la détection du navigateur, et la coloration de mes gris ...

+0

utilisez-vous une feuille de style d'impression? – CamelCamelCamel

+1

J'ai toujours pensé que le noir était forcé car l'encre blanche s'imprime beaucoup plus rapidement et coûte moins cher que l'impression en gris, car cela nécessite l'utilisation d'encre couleur. – thirtydot

+0

opacité sonne comme une grande technique - si tout le reste échoue, je voudrais recourir à cela ou PDF. –

Répondre

28

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; 
     } 
     } 
    } 
+3

Cela fonctionne! Tu es un génie! [Voici une démonstration.] (Http://jsfiddle.net/hDZBt/show/) Testé dans IE11, Chrome et Firefox. –

+0

Ne fonctionne pas dans Firefox. – Jehy

+0

Fonctionne pour moi dans Firefox .. –

3

Certains navigateurs ajoutent plus de respect à votre gris si vous ajoutez de la couleur: Remplacer #777 par #778. Méfiez-vous de l'opacité. Parfois, même si l'aperçu avant impression affiche d'excellents résultats, il ne fonctionne que sur certaines imprimantes. Les imprimantes avec un firmware malchanceux ne pourront pas imprimer votre texte s'il est gris en utilisant l'opacité.

+1

Pour ceux qui viennent après moi; Je suis dans une situation où cette opacité fallback est parfaite pour moi. Je veux quelque chose à montrer seulement si sa couleur est inchangée, ainsi je change ce qui peut être caché ou grisé avec l'opacité. :) – SoreThumb

6

J'ai trouvé dû:

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

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

Je ne pouvais pas le faire fonctionner dans Chrome.

+0

Désolé, pas tout à fait exact. L'option 2 fonctionne même si l'option 1 n'est pas exécutée. –

+0

@GeorgeBailey, ce n'est pas ce que je vois dans FireFox v24 sur OSX pour cette page: http://www.awesometimer.com/results/nightingale_nightmare/ si j'enlève la règle "! Important" les trophées sont tous imprimés en noir (les trophées sont simplement des personnages dans fontawesome). –

+1

Dans mon Firefox, si vous allez dans Fichier-> Mise en page, et cochez la case "Imprimer les couleurs et les images d'arrière-plan", vos trophées s'impriment en gris. J'utilise Firefox 24 sur Windows 7. –

1

Je trouve que couleur du texte n'est pas héritée par "usage général" stylesheet, mais doit être forcé à nouveau dans le fichier css d'impression. En d'autres termes, même si la couleur du texte est définie dans le fichier css général (un attribut media='all'), elle est ignorée lors de l'impression, au moins dans Firefox et Chrome.

J'ai trouvé que l'écriture à nouveau (redondant mais ... nécessaire) la couleur du texte dans le fichier css d'impression (un avec l'attribut media='print'), la couleur sera maintenant considérée.

+1

Je me demande pourquoi je n'ai pas réussi à faire fonctionner ça. Un exemple de page serait intéressant à regarder. –

2

Vous avez juste besoin de sortir votre police grise 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> 
0

Rien ne fonctionnait mieux pour moi, donc j'ai finalement compris.

donnent toujours des couleurs pour diriger les éléments. Ex. Supposons que votre HTML est

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

et votre CSS

.div { 
    color: #ccc; 
    } 

Ce fut mon cas. Dans ce cas, peu importe ce que vous faites, la couleur ne s'affichera pas.

Vous devez faire

.div h1 { 
color: #ccc; 
} 

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

Hope this vous aide !!

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

Questions connexes