texto problema pixelado letras google fuentes fuente chrome cambio borroso borrosas css google-chrome

css - problema - se cambio la fuente de chrome



La fuente de Chrome aparece borrosa (14)

¡Me está poniendo los ojos!

se ve bien en IE y Firefox

Chrome (arriba)

Ejecutar la versión 39 de Chrome, solo aparece borrosa en un cuadro modal, no hace ninguna diferencia si cambio la familia de fuentes.

Este es el CSS (para la etiqueta "Inicio") que el navegador muestra lo siguiente

box-sizing: border-box; color: rgb(85, 85, 85); cursor: default; display: block; float: left; font-family: sans-serif; font-size: 12px; font-weight: 600; height: 24px; line-height: 17.142858505249px; margin-bottom: 0px; margin-top: 0px; min-height: 1px; padding-left: 15px; padding-right: 15px; padding-top: 7px; position: relative; text-align: right; visibility: visible; width: 89.65625px;

¿Es el navegador o CSS?

--ACTUALIZAR---

Ok parece que es este CSS

.md-modal { position: fixed; top: 50%; left: 50%; width: 50%; max-width: 630px; min-width: 320px; height: auto !important; z-index: 2000; visibility: hidden; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform: translateX(-50%) translateY(-50%); <--- This line -moz-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); }

Sin embargo, si lo saco, ¿mi modal ya no se centra?

Agregar una transición CSS al elemento padre del elemento padre de mi elemento borroso (que estaba usando transformX que causaba borrosidad) en realidad canceló la borrosidad ofensiva.

El problema similar me sucedió.

Intenté con todos los métodos sugeridos, ninguno funcionó bien. Sin embargo, finalmente lo resolví. Como hay un problema con Google Chrome que tiene font-weight:600 o más. Intente cambiar la familia de font-family:"Webly Sleek SemiBold","Helvetica"; a familia de font-family:"Webly Sleek SemiBold","Helvetica";

La propiedad de peso de fuente funcionará bien para ello.

Experimenté el mismo problema en Chrome después de aplicar la transformación de traducción a uno de mis elementos. Parece ser un error en Chrome. Lo único que funcionó para mí fue esto:

#the_element_that_you_applied_translate_to { -webkit-filter: blur(0.000001px); }

Otra solución puede ser activar la representación fluida de fuentes en:

#the_element_that_you_applied_translate_to { -webkit-font-smoothing: antialiased; }

Gracias por el ejemplo CSS. Parece que translateX(50%) y translateY(50%) están calculando un valor de píxel con un lugar decimal (p. Ej., 0.5px) que causa la representación de subpíxeles.

Hay muchas soluciones para esto, pero si desea conservar la calidad del texto, su mejor solución en este momento es usar -webkit-font-smoothing: subpixel-antialiased; en .md-modal para forzar el estado de renderizado de los navegadores webkit como Chrome y Safari.

Me tomó un tiempo encontrar una solución que no me molestaría en usar, así que la publicaré aquí.

El problema para mí fue que el div secundario tenía propiedades de width y height con una combinación que causó el problema.

Cuando cambié la height por otro valor, ¡simplemente funcionó!

Esto probablemente tiene que ver con las otras respuestas, pero no quería usar ningún JS o cambiar la propiedad de transformación para solucionarlo.

Aquí hay un ejemplo en vivo: JSFIDDLE

Otra causa puede ser que no está proporcionando los pesos de fuente necesarios que está utilizando.

Por ejemplo, si desea usar tanto Lato como Roboto, desea incluir más que solo el peso estándar. Este ejemplo se aplica si está utilizando la API de fuentes de Google:

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato:400,900|Roboto:500,700">

Nota: Lato está disponible en 100, 300, 400, 700 y 900, pero tuve que especificar 900 para que mi texto 700 se vuelva nítido ... no estoy seguro de por qué.

Para cuadros modales, este CSS ayudará a:

-webkit-transform: translate3d(-50%, -51%, 0); -moz-transform: translate3d(-50%, -51%, 0); transform: translate3d(-50%, -51%, 0);

En lugar de colocar el eje Y al 50%, hágalo 51%. Esto ayuda en mi cse. Si tiene una posición diferente, juegue, pero generalmente 1% arriba / abajo corrige el contenido borroso.

Por ahora, encontré solo una buena solución:

transform: translate(-50%, -50.1%)

0.1% - en general el usuario no puede ver esto

Hope Chrome lo solucionará, el error existe desde 2014))))

Si no desea implementar ningún js especial o solución personalizada y lo único que desea lograr es centrar su div, y el ancho y la altura no tienen un tamaño fijo, simplemente puede usar esto:

position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto;

Si uno de los tamaños es fijo, puede probar este enfoque:

position: absolute; left: 50%; translate: transformX(-50%); top: 0; bottom: 0; margin: auto;

Soluciona el problema con la fuente borrosa en Chrome.

Si quieres centrar algo, mejor usa flexbox. Le ayudará a posicionarse sin tener texto borroso.

Agregue esto al elemento primario del elemento que desea centrar:

display: flex; justify-content: center; align-items: center;

Espero que esto ayude.

Solucioné este problema restando 0.5px del valor del eje Y. Entonces, en lugar de hacer:

transform: translateX(-50%) translateY(-50%);

Hice esto:

transform: translateX(-50%) translateY(calc(-50% - .5px));

Esto lo resolvió para mí y encuentro que esta es una solución más limpia que luego juega con el porcentaje o usando Javascript.

Terminé arreglando esto eliminando estas líneas:

-webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; backface-visibility: hidden;

La única forma correcta de resolver esto:

Este problema surge del hecho de usar valores% para alinear los divs usando transformaciones css. Esto da como resultado valores de subpíxeles decimales, que su pantalla no puede representar correctamente. La solución es normalizar la matriz de transformación resultante.

Podría funcionar mejor para divs fijos que no hacen animación de transformación. Pero si anima puede utilizar una devolución de llamada posterior a esta función para corregir el estado final.

Entonces: matriz (1,0,0,1, -375, -451.5 ) se convertiría en matriz (1,0,0,1, -375, -451 )

Llamo a este método antes del .show () de jquery ... O tal vez solo una vez en la aplicación (depende de su caso), es posible que también deba llamar a esto en el evento de cambio de tamaño, etc.

function roundCssTransformMatrix(element){ var el = document.getElementById(element); el.style.transform=""; //resets the redifined matrix to allow recalculation, the original style should be defined in the class not inline. var mx = window.getComputedStyle(el, null); //gets the current computed style mx = mx.getPropertyValue("-webkit-transform") || mx.getPropertyValue("-moz-transform") || mx.getPropertyValue("-ms-transform") || mx.getPropertyValue("-o-transform") || mx.getPropertyValue("transform") || false; var values = mx.replace(/ |/(|/)|matrix/g,"").split(","); for(var v in values) { values[v]=v>4?Math.ceil(values[v]):values[v]; } $("#"+element).css({transform:"matrix("+values.join()+")"}); }

y llámalo

roundCssTransformMatrix("MyElementDivId"); $("#MyElementDivId").show();

Hermosa no es así?

Si necesita actualizar el cambio de tamaño, puede hacerlo con:

$( window ).resize(function() { roundCssTransformMatrix("MyElementDivId"); });

Para que esto funcione, todo el padre debe "estar alineado / normalizado" porque si por ejemplo tiene el cuerpo con x = 10.1px a la izquierda, y el niño tiene 10px ... el problema no desaparecerá debido a que el padre tiene decimales residuales en su matriz Por lo tanto, debe aplicar esta función a cada elemento que es padre y utiliza transformación.

Puede ver este script en vivo aquí: https://jsbin.com/fobana/edit?html,css,js,output