tamaño - CSS-texto blanco sobre fondo negro, se ve más audaz

texto en colores

Question

Cuando se usa texto blanco sobre fondo negro, el texto se ve más grueso de lo que debería verse. Su texto puro con css. Estoy usando la fuente typekit.org

¿Hay alguna forma de solucionar este problema o es algún tipo de problema de suavizado?

Answer 1

Creo que es una ilusión óptica, css lo define usted, si no puso una regla que haga que el texto esté en negrita en css, entonces no puede estar en negrita.

Answer 2

Descubrí que una combinación de font-smoothing: antialiased de font-smoothing: antialiased o font-smoothing: grayscale (como han mencionado otros) y text-rendering: optimizeLegibility puede producir resultados consistentes en colores claros y oscuros y también en diferentes navegadores. Debe realizar las pruebas adecuadas en cada navegador porque no obtiene los mismos resultados con cada fuente. A veces, solo la configuración font-smoothing hace el truco, a veces solo la configuración text-rendering hace el truco, y otras veces necesita usar ambos.

Answer 3

El texto está en negrita debido al algoritmo anti-aliasing que se usa en su navegador. Es fácil de verificar. Realiza capturas de pantalla en IE, Safari, Firefox y Chrome. Todos ellos son anti-alias de manera diferente. Algunos hacen que el texto se vea más grueso que otros. Generalmente el mejor texto se ve blanco sobre negro, mientras más grueso se ve invertido.

Aquí hay una explicación completa: http://www.lighterra.com/articles/macosxtextaabug/

Esto desactivará el suavizado en la mayoría de los navegadores:

body {
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
-o-font-smoothing: antialiased;
}

Answer 4

En realidad, es un bug known :

Pude arreglar esto usando:

-webkit-font-smoothing:antialiased

Fuente: este artículo (en caché en archive.org) .

Un poco tarde, pero todavía puede ser útil para algunos.

Solo recuerda que esto no es recomendable . A menos que estés en MacOS y estés usando texto claro sobre fondo oscuro.

Answer 5

Esto no es una ilusión óptica. Es un problema relacionado con el sistema operativo y el navegador que aún existe en 2018. Este pequeño fragmento muestra el problema:

<div style="background-color: #000; font-size: 16px; position: relative;">
  <div style="color: #fff;">Hello World</div>
  <div style="color: #000; position: absolute; top:0;">Hello World</div>
</div>

Si está sentado frente a una caja macOS, puede notar los contornos en blanco. Son el resultado de un suavizado de fuentes demasiado motivado. Intente usar -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; Para reducir este efecto.