2

No se si es algo que se debe al renderizado del texto, pero cuando uso colores en textos de aproximadamente menos de 50px se muestra el texto con un ligero borde gris que hace que el tono de color cambie (se oscurece y pierde saturación). Cuando el tamaño supera los 50px el borde no aparece.

Pensé que se trataba de algo relacionado a "text-rendering" o "-fx-stroke", pero nada.

He buscado información al respecto pero no encuentro nada que explique esto. Alguien tiene idea o sabe que sucede? Saludos.


Añado:

Texto como debería verse, color correcto Texto como debería verse, color correcto

Texto con el borde que modifica el color Texto con el borde que modifica el color

En ambos casos el texto tiene el mismo color, el ligero borde que aparece es el que hace que cambie totalmente la apariencia.

2
  • pon tu codigo porfavor el 30 mar. 2018 a las 22:35
  • 1
    x-rw, si requieres el código no entendiste bien mi pregunta (o yo no me expliqué bien). No estoy añadiendo ningún estilo adicional y sospechaba que más bien algo me estaba faltando (cosa que ahora se que es así). Ahora entiendo que es algo en lo que no muchos reparan, yo le pongo mucha atención a estos detalles porque soy diseñador-programador, y obtener los colores y formas previamente definidas es muy importante para mi. No pongo un código en particular por 2 cosas: 1. No tenía idea de en que parte de todo el código del proyecto estaba el detalle. 2. Es un detalle que veo en muchos sitios.
    – Drewkenobi
    el 30 mar. 2018 a las 23:18

1 respuesta 1

2

Gracias a mi gran perseverancia (algunos lo llaman, terquedad, jeje), he dado con el detalle que causa esto:

// Esta propiedad le añade un borde gris (viene por default en el boostrap):
-webkit-font-smoothing: subpixel-antialiased;

la propiedad adecuada para que no suceda esto debe ser

-webkit-font-smoothing: antialiased;

Además, al parecer sólo ocurre con chrome, safari y todos los navegadores sobre webkit. No pude checarlo en IE porque uso OSX.

Espero que le sirva a alquien que pudiera pasar por el mismo apuro y su estándar de calidad visual no permita pasar por alto algo como esto.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.