Cómo definir el tamaño de fuente (font-size) con CSS
Vie, 06/05/2009 - 00:09 : Balu
Este es un tip para trabajar con fuentes ems sin ningún problema. Recuerden que la ventaja de trabajar con ems, en lugar de pixeles, es la flexibilidad que tiene, permitiendo a los lectores poder incrementar o reducir el tamaño del texto a su gusto y antojo.
Para poder definir el tamaño de las fuentes con CSS de una manera coherente, debemos primero igualar 1em a 10px para toda la página.
body {
font-size: 62.5%; /* Igualamos 1em a 10px */
}Y luego, establecer el tamaño de la fuente de las secciones o elementos de nuestro sitio, por ejemplo el contenido.
#content {
font-size: 1.6em;
line-height: 1.6em;
}1.6em es igual a 16px.
El line-height es la distancia entre las lineas.
Buen uso de la font-size
Este tipo de post siempre me parecen una gran ayuda la comunidad en general, pero creo que se podrÃa mejorar un poquito.
Internet Explorer (todas las versiones) ignoran el punto decimal del porcentaje, por lo que interpreta el 62.5% como solo 62% y la equivalencia pra IE no seria de 10px, sino que de 9.92px
Lo mejor que se podrÃa hacer para obtener los 10px funcionando en todos los navegadores seria utilizar un tip como este:
html{font-size: 125%; /* Igualamos 1em a 20px */
}
body{
font-size: .5em; /* Igualamos 1em a 10px */
}
Como aquà se maneja un porcentaje redondo, no da problemas en ningún navegador.
Saludos, y me encanta este blog, se aprenden muchas cosas n.n
- responder
Enviado por SebaKito (no verificado) el Sáb, 06/06/2009 - 01:51.Efectivamente, olvidaba ese detalle. Gracias!
- responder
Enviado por baluart el Sáb, 06/06/2009 - 11:43.hola gusto en conocerte, excelentes articulos tienes por aquÃ
Bueno en relación al post, ¿si controlamos el tamaño de los em como si fueran pixeles, no serÃa lo mismo que manejar los pixeles directamente?
No es una correción, es una duda que tenido desde hace tiempo
- responder
Enviado por zeuder (no verificado) el Vie, 06/12/2009 - 16:05.Deja tu comentario