0
184
Visualizações¿Por qué pulso de texto?
Me pregunto por qué este texto, aunque es el mismo, es palpitante. ¿Algunas ideas? Parece un problema de representación de fuentes.
setInterval(() => { const elem = document.querySelector('p'); elem.style.display = elem.style.display === 'none' ? '' : 'none'; }, 1000) p { position: absolute; color: red; } <p>Test</p> <p>Test</p>3 Respostas
Responde à pergunta0
La razón de esto es que el texto normalmente se procesa suavizado, lo que significa que tiene píxeles con diferentes transparencias (y posiblemente también color) en el borde de la fuente para obtener una apariencia uniforme:
Por lo tanto, el área alrededor de la fuente es hasta un píxel más grande de lo que se percibe al mirarla. Si superpone el mismo texto varias veces, parecerá más grueso porque los píxeles con transparencias se superponen y, por lo tanto, reducen la cantidad de fondo que se ve:
Cuando no está activo el anti-aliasing (suavizado de fuentes), no ve una diferencia entre el texto de referencia y el caso en el que se superponen varios elementos (ese ejemplo podría no funcionar para todos los navegadores o sistemas operativos):
p { position: absolute; } * { font-smooth: never; -webkit-font-smoothing: none; } <p>overlayed text</p> <p>overlayed text</p> <p>overlayed text</p> <p>overlayed text</p> <div>reference text</div>Con el anti-aliasing (suavizado de fuente) activo, puede ver que el texto superpuesto se ve más audaz que el texto de referencia.
p { position: absolute; } <p>overlayed text</p> <p>overlayed text</p> <p>overlayed text</p> <p>overlayed text</p> <div>reference text</div>0
Lo más probable es que tenga que ver con el suavizado de la fuente. Hace que los bordes sean semitransparentes, lo que al superponerlos hará que sean más opacos y por lo tanto más visibles.
0
Debido a que las propiedades en el texto cambian, haga clic derecho e inspeccione el elemento y podrá ver esto:
