2011-09-30 23 views
24

Esiste un modo per garantire che i colori dei caratteri grigi non diventino neri?Stampa a caratteri grigi a colori

Firefox e Chrome sembrano fare questo per evitare che il testo bianco su sfondo nero diventi bianco su bianco. Non ho un colore di sfondo (eccetto il bianco), quindi questa conversione a livello di browser non è utile, aiuta solo a prevenire i colori grigi senza motivo.

C'è un modo per disattivarlo? O dovrei limitarmi a tecniche come l'opacità, il rilevamento del browser e colorare i miei grigi ...

+0

stai usando un foglio di stile di stampa? – CamelCamelCamel

+1

Ho sempre pensato che il nero fosse forzato perché l'inchiostro bianco si stampa molto più velocemente ed è più economico della stampa grigia, perché ciò richiede l'uso di inchiostro a colori. – thirtydot

+0

l'opacità suona come una grande tecnica - se tutto il resto fallisce, vorrei ricorrere a quello o ai PDF. –

risposta

28

Soluzione:

@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

Funziona! Sei un genio! [Ecco una dimostrazione.] (Http://jsfiddle.net/hDZBt/show/) Testato su IE11, Chrome e Firefox. –

+0

Non funziona in firefox. – Jehy

+0

Funziona per me in Firefox .. –

3

Alcuni browser aggiungono più rispetto al grigio se si aggiunge il colore: Sostituire #777 con #778. Stai attento all'opacità. A volte, anche se l'anteprima di stampa mostra grandi risultati, funziona solo su determinate stampanti. Le stampanti con firmware sfortunato non riusciranno a stampare il tuo testo se sono grigie usando l'opacità.

+1

Per quelli che vengono dopo di me; Sono in una situazione in cui questo ricaduta di opacità è perfetto per me. Voglio che qualcosa venga mostrato solo se il suo colore è invariato, quindi cambio quello che può essere nascosto o in grigio con l'opacità. :) – SoreThumb

6

ho trovato dovuto:

  1. Aggiungere !important alla regola CSS ... e ...

  2. Nella finestra di dialogo di stampa di Firefox, selezionare l'opzione per "Aspetto : Stampa colori di sfondo "

Non riuscivo a farlo funzionare in Chrome.

+0

Siamo spiacenti, non abbastanza preciso. L'opzione 2 funziona anche se l'opzione 1 non viene eseguita. –

+0

@GeorgeBailey, non è quello che vedo in FireFox v24 su OSX per questa pagina: http://www.awesometimer.com/results/nightingale_nightmare/ se rimuovo la regola "! Important" i trofei sono tutti stampati in nero (i trofei sono semplicemente personaggi in fontawesome). –

+1

Nel mio Firefox, se vai a File-> Imposta pagina, e seleziona la casella "Stampa colori e immagini di sfondo", i tuoi trofei vengono stampati in grigio. Sto usando Firefox 24 su Windows 7. –

1

ho scoperto che colore del testo non viene ereditato da "general purpose" stylesheet, ma deve essere costretto di nuovo nel file di stampa css.

In altre parole, anche se il colore del testo è impostato nel file css generale (uno con l'attributo media='all'), viene ignorato quando viene stampato, almeno in Firefox e Chrome.

Ho trovato che scrivere di nuovo (ridondante ma ..... necessario) il colore del testo nel file css di stampa (uno con l'attributo media='print'), verrà preso in considerazione il colore ora.

+1

Mi chiedo perché non riesco a farlo funzionare. Una pagina di esempio sarebbe interessante da guardare. –

2

Hai solo bisogno di emettere il tuo carattere grigio in svg. I browser non cambiano colore in svg. Ecco un esempio:

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

Niente di sopra funzionava per me quindi ho finalmente capito.

Dai sempre colori agli elementi diretti. Ex. Supponiamo che il vostro html è

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

e il CSS

.div { 
    color: #ccc; 
    } 

Questo era il mio caso. In questo caso, indipendentemente da ciò che fai, il colore non verrà visualizzato.

quello che dovete fare

.div h1 { 
color: #ccc; 
} 

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

Spero che questo ti aiuta !!

Si prega di rispondere se si trova una soluzione migliore in quanto questo è quello che ho potuto trovare dopo 2 ore e funziona per me.

Problemi correlati