Impresión de color de fuente gris

¿Hay alguna manera de garantizar que mis colores de fuente gris no se vuelvan negros?Impresión de color de fuente gris

Parece que Firefox y Chrome hacen esto para evitar que el texto blanco sobre fondo negro se convierta en blanco sobre blanco. No tengo un color de fondo (excepto blanco), por lo que esta conversión a nivel de navegador no es útil, solo ayuda a prevenir los colores grises sin ningún motivo.

¿Hay alguna manera de desactivar esto? ¿O debería seguir con técnicas como opacidad, detección de navegador y colorear mis grises ...

Fuente

2011-09-30 George Bailey

¿Está utilizando una hoja de estilo de impresión? – CamelCamelCamel

Siempre pensé que el negro se veía forzado porque la tinta en blanco se imprime mucho más rápido y es más barata que la impresión en gris, porque eso requiere el uso de tinta de color. – thirtydot

la opacidad suena como una gran técnica; si todo lo demás falla, recurriría a eso o archivos PDF. –

Solución:

@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; 
     } 
     } 
    }

Fuente

2014-04-23 14:16:50

¡Funciona! ¡Eres un genio! [Aquí hay una demostración.] (Http://jsfiddle.net/hDZBt/show/) Probado en IE11, Chrome y Firefox. –

No funciona en Firefox. – Jehy

Funciona para mí en Firefox ... –

Algunos navegadores añaden más respeto a su gris si agrega color: Reemplace #777 con #778. Tenga cuidado con la opacidad. A veces, incluso si la vista previa de impresión muestra excelentes resultados, solo funciona en impresoras seleccionadas. Las impresoras con un firmware desafortunado no podrán imprimir el texto si es gris con opacidad.

Fuente

2013-01-17 22:03:52

Para aquellos que me siguen; Estoy en una situación en la que esta caída de opacidad es perfecta para mí. Quiero que se muestre algo solo si el color no cambia, así que cambio lo que se puede ocultar o gris con opacidad. :) – SoreThumb

encontré tuvieron que:

Añadir !important a la regla css ... y ...
En el diálogo de impresión Firefox, marque la opción "Apariencia : Imprimir colores de fondo "

No pude conseguir que funcione en Chrome.

Fuente

2013-10-24 21:43:27

Lo siento, no del todo preciso. La opción 2 funciona incluso si la Opción 1 no se realiza. –

@GeorgeBailey, eso no es lo que veo en Firefox v24 en OSX para esta página: http://www.awesometimer.com/results/nightingale_nightmare/ si elimino la regla "! Important", todos los trofeos están impresos en negro (los trofeos son simplemente personajes en fontawesome). –

En mi Firefox, si va a Archivo-> Configurar página y marca la casilla "Imprimir colores de fondo e imágenes", sus trofeos se imprimirán en gris. Estoy usando Firefox 24 en Windows 7. –

me encontré con que color del texto no es heredado por "propósito general" hoja de estilo, pero debe ser forzado de nuevo en el archivo css de impresión.

En otras palabras, incluso si el color del texto se establece en el archivo css general (uno con el atributo media='all'), se ignora cuando se imprime, al menos en Firefox y Chrome.

Encontré que escribir de nuevo (redundante pero ..... necesario) el color del texto en el archivo css de impresión (uno con el atributo media='print'), ahora se considerará el color.

Fuente

2014-11-07 14:41:29

Me pregunto por qué no pude conseguir que funcione. Una página de ejemplo sería interesante de ver. –

Solo tiene que dar salida a su fuente gris en svg. Los navegadores no cambian de color en svg. Aquí hay un ejemplo:

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

Fuente

2015-08-11 13:22:02 Jehy

Nada de lo anterior funcionaba para mí, así que finalmente lo descubrí.

Proporcione siempre colores a los elementos directos. Ex. Suponga que su html es

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

y el CSS

.div { 
    color: #ccc; 
    }

Este fue mi caso. En este caso, no importa lo que hagas, el color no se mostrará.

que tiene que hacer

.div h1 { 
color: #ccc; 
} 

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

Espero que esto ayude !!

Responda si encuentra una solución mejor, ya que esto es lo que pude encontrar después de 2 horas y me funciona.

Fuente

2016-04-15 10:23:08 entersid

Respuesta

Cuestiones relacionadas