La legibilidad, un conjunto de características que hace a un texto o tipografía más fácil de leer, puede mejorarse de varias formas. Una de ellas la introdujo Firefox 3.0 y que ahora adoptan Safari 5, Chrome y la beta de webkit (del que derivan otros navegadores) y se trata de un propiedad CSS que controla el renderizado de un texto: text-rendering
.
¿Cómo funciona?
Funciona y se aplica como cualquier otra propiedad de CSS, text-rendering
puede tomar los siguientes valores:
optimizeLegibility
– Que da prioridad a la legibilidad del texto. Habilita el kerning y la ligadura de la tipografía.auto
– por defecto usaoptimizeLegibility
para texto de menor tamaño que 20px yoptimizeSpeed
para los de mayor tamaño.optimizeSpeed
– Que da prioridad a la velocidad con que se muestra un texto.geometricPrecision
– Da prioridad a la geometría del texto.
Ejemplos:
body { text-rendering: optimizeLegibility; }
.post { text-rendering: optimizeSpeed; }
Comentario
Una propiedad CSS que otorga al diseñador una herramienta de control más sobre el texto, por ahora el soporte es limitado, pero que seguramente irá aumentando con el transcurrir de las versiones de los navegadores.
Tom julio 5, 2010 a las 9:01 am
Donde puedo ver un ejemplo funcionando ?
ResponderFrancisco julio 5, 2010 a las 1:04 pm
@Tom: En la documentación de firefox.
Responderpedro enero 30, 2011 a las 1:52 pm
francisco te quedo demasiado bueno ese texto….me gusta el texto….te felicito,muy chevere…jejejeje
ResponderPedro enero 30, 2011 a las 1:53 pm
jejejeje espero q sigas asi de inteligente…..
Responderprotocolo_ssl agosto 15, 2011 a las 4:24 pm
Justo lo que estaba buscando, me estaba volviendo loco con el contenido de una web que estoy desarrolando, lo probaré con las fuentes de Google. Muchas gracias por la información y saludos.
ResponderDiamantes junio 26, 2012 a las 8:45 pm
Hola necesito un favor, yo quiero aprender a guardar una alteración de un número, cuando voy a inspeccionar elemento lo modifico, pero como hago para que quede guardada, Gracias..
ResponderEstevez junio 15, 2013 a las 11:04 am
Hola Francisco.
ResponderHaber si me puedes ayudar, llevo hace tiempo intentando saber como pongo en mi blog como lo tienes tu en el tuyo,donde metes los ejemplos, no se como llamarlo se que no es una [textarea] tu lo tienes debajo de donde tienes el Ejemplo:
——————————-
Codigo
body { text-rendering: optimizeLegibility; }
.post { text-rendering: optimizeSpeed; }
——————————-
La cajita de color gris donde metes los códigos de los ejemplos.
Por mas que intento aprender como ponerlo en mi blog no logro encontrar como hacerlo.
Me siento tonto al no saber como explicarme.
Haber si tu me puedes ayudar te estaria agradecido.
Edgar agosto 4, 2014 a las 9:17 am
Lamentablemente esta propiedad no está dentro del estandar css3, por lo que arroja errores en la validación de una hoja de estilo
Responder