2011-10-18 11 views
30

Me encontré con el problema, necesito facilitarles a los usuarios leer el texto, así que usé el espaciado de letras de 1 px, pero se ve feo, así que pensé usar medio píxel para 0.5px, pero no funciona, intenté usar los atributos em, pero no logré la tarea.¿Hay alguna manera de hacer el espaciado de letras css: 0.5 px?

Entonces, ¿hay una manera de hacer carta de espaciamiento medio píxel (solución navegadores si es posible)

+1

Probablemente se encuentre con problemas de alineación de píxeles con [font-hinting] (http://en.wikipedia.org/wiki/Font_rasterization); probablemente esté cambiando en medio píxel, pero luego el rasterizador de fuentes está realineando el texto a los límites de los píxeles. Los efectos de 0.5px podrían variar razonablemente de OS a OS y de navegador a navegador. – Phrogz

+0

Dado que este es uno de los primeros resultados de Google, para ayudar a los novatos compañeros, el espaciado de letras fraccionado es compatible con todos los principales navegadores, a partir de finales de 2013. –

Respuesta

17

Este error se ha reportado en el 2008 y se confirma. Entonces, si alguien tiene ganas de hackear el webkit, eso haría felices a muchos diseñadores.

https://bugs.webkit.org/show_bug.cgi?id=20606

+0

¡Parece un parche finalmente aterrizado en el juego web! Y Chrome/blink fue arreglado hace algún tiempo. Por lo tanto, podremos usar espaciado de letras fraccional de forma segura muy pronto. – idFlood

+0

Todavía no funciona en Safari ... –

+0

Acabo de probar con el safari más reciente (8.0) y ahora está funcionando:) – idFlood

1

tamaños de sub-píxeles son legales, pero que puede tener resultados impredecibles a través de los navegadores. Las cosas como el texto también intentan alinearse con píxeles completos (como dice Phrogz), por lo que es probable que los errores de redondeo resultantes hagan que las cosas se vean disparejas.

+2

Según las [Especificaciones de CSS2] (http://www.w3.org/ TR/1998/REC-CSS2-19980512/texto.html # spacing-props) la cantidad de espaciado es _ "** además de ** el espacio predeterminado entre los caracteres" _; tener un 0.5px adicional es un deseo razonable y legible – Phrogz

+0

Bien, se eliminó la incorrección de la respuesta. – Toomai

6

El espaciado de letras subpíxel funciona bien en FF, pero no en WebKit (al menos en Windows). Consulte este caso de prueba:
http://jsfiddle.net/fZYqL/2/

Esta prueba también muestra que no es el valor literal subpíxel lo que constituye un problema. El uso de valores em fraccionarios que dan como resultado menos de 1px de espacio entre letras tampoco se respeta en Webkit, pero funcionan igual de bien en Firefox.

Firefox versus Webkit

2

@Zach Re: píxeles fraccionarios. Aunque no existen físicamente, se simulan digitalmente mediante transparencias y cambios de color. Un buen ejemplo son los iconos y las gracias de tipo. Una mirada cercana a lo que parece ser una línea muy delgada demostrará rápidamente que se simula haciendo que la línea tenga un color más claro que engaña al ojo. Entonces, incluso cuando no existen, el software gráfico se ha ocupado de los píxeles fraccionarios de forma adecuada desde hace mucho tiempo. Es una pena que los navegadores webkit todavía no lo hacen.

Re: espaciado entre letras fraccional. Se puede especificar y funciona bien en navegadores que no sean webkit (felicitaciones por IE por una vez). En navegadores web, el espaciado entre letras se redondea al entero más cercano (creo que se redondea hacia abajo). Este redondeo ocurre no solo cuando el espaciado de letras se especifica directamente como un píxel fraccionario, sino también cuando se especifica como un porcentaje o valor em y el cálculo final en píxeles da como resultado un píxel fraccionario. Muy frustrante.

5

Este error ha sido fixed in Chromium y ha entrado en Chrome 30. Los valores fraccionarios ahora son compatibles con Firefox, Chrome y Opera.

+0

Esto se dice que es fijo, pero todavía puedo verlo en el más reciente (por ahora) '31.0.1650.48 m'. –

+0

Probé el ejemplo anterior (http://jsfiddle.net/fZYqL/2/) en la versión de Chrome 31.0.1650.48 que funcionó bien para mí. – Max

+0

probado y parece estar trabajando también en IE9 + – Wolverine

Cuestiones relacionadas