En mi sitio web he notado que existe una diferencia sustancial en la calidad del texto entre Firefox, Chrome e Internet Explorer. Mientras que el texto es cristalino en Chrome, y aún más en Firefox, parece borroso y fuera de foco en Internet Explorer. Aquí hay una comparación de imágenes:
Personalmente creo que no es estéticamente agradable a la vista. Me gustaría encontrar una solución sin pedir a los usuarios que utilicen complementos como Microsoft Silverlight, ya que no todos los usuarios querrán instalar un complemento solo para ver 1 sitio web. No entiendo cómo sitios web como Facebook y StackOverflow no tienen este problema (o al menos menos problemas).
He intentado usar filtros CSS, diferentes propiedades de renderización de fuentes y usar diferentes unidades para el tamaño de la fuente, pero no veo ningún efecto. Sé que no he probado todas las combinaciones posibles de propiedades CSS, por lo que esta podría seguir siendo la respuesta.
He estado buscando en la web y en StackOverflow durante horas y aún no he encontrado una solución. Hay otras preguntas similares aquí pero no tienen respuesta.
Cualquier ayuda, idea de a dónde ir o qué hacer, es muy bienvenida. Ejecute este fragmento en diferentes navegadores si no puede ver la imagen o el sitio web:
html,body{
margin:0;
height:100%;
font: normal 14px/24px "Lucida Sans Unicode","Lucida Grande", "Arial", sans-serif;
}
.popup{
position:relative;
top:50%;
left:50%;
text-align: center;
vertical-align: middle;
display: inline-block;
white-space: nowrap;
background-color:rgb(28, 31, 37);
color:white;
padding:1em;
z-index:2;
transform: translate(-50%,-50%);
-webkit-box-shadow: 0px 0px 14px -2px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 14px -2px rgba(0,0,0,0.75);
box-shadow: 0px 0px 14px -2px rgba(0,0,0,0.75);
}
p{
font-size: small;
}
input{
padding: 16px 12px;
width: 250px;
border: 0;
background: #0A0A0A;
color: #eee;
font-size: 14px;
font-family: "Open Sans",sans-serif;
-webkit-box-shadow: inset 0 0 0 1px #323742;
-moz-box-shadow: inset 0 0 0 1px #323742;
box-shadow: inset 0 0 0 1px #323742;
}
#blackout {
background: rgba(17,19,23,.5);
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1;
cursor: pointer;
}
Comparar este texto
Y también este texto
Curiosamente, el Fragmento se ve similar en diferentes navegadores: pero si se observa cuidadosamente hay diferencias definitivas. Chrome (Versión 44.0.2403.125 m) parece tener un efecto de borde afilado. IE (11) parece tener un ligero desenfoque. Mientras que Firefox (38.0.1), según explicó @user4749485, parece haber seleccionado lo mejor de ambos mundos para lograr la mejor legibilidad. ¿Existe una manera de calcular manualmente y ajustar la fuente solo para IE? (Otro posible método para solucionarlo).
No estoy seguro de dónde proviene el resto del desenfoque (el texto del Fragmento parece más claro aquí que el texto en mi sitio web). Si podemos descubrir de dónde proviene esta diferencia, tal vez sea más fácil resolverlo. (He estado añadiendo/eliminando CSS al Fragmento, así que perdona todas las ediciones)
TL;DR, y solo para ampliar la pregunta: Me gustaría que el texto se vea claro en IE como lo hace en Firefox o Chrome.
Comparación para la respuesta de Sergey Denisov:
Mientras que podría usar la respuesta de Srikanth Pullela para aplicar esta transformación CSS solo a IE, tengo curiosidad por saber si hay una solución para todos los navegadores. Edit: Usaré el método mencionado anteriormente ya que la solución propuesta hace que esto suceda, lo que significa que no puedo depender de la representación de la GPU para mostrarlo correctamente: