A través de Ovillo, una vez más, Manuel González Noriega, de Simplelógica, nos ilustra con este truco que hará la vida más fácil a aquellos que se lian con las unidades relativas em.
Dado que la mayoría de navegadores modernos tienen el tamaño por defecto de fuente de 16px, puedes definir el siguiente estilo:
font-size:62.5%;
}
Con lo cuál a partir de entonces todas las medidas en em se pueden pasar a px cómodamente de esta forma:
1.2em => 12px
1.5em => 15px
Aquí se puede ver la prueba que hice en Firefox 1.0.4 (a la izquierda) y Microsoft Internet Explorer 6 (a la derecha):
Recordar que según el punto 3.4 de las pautas de accesibilidad de la W3C, toda página web debe tener tamaños de fuente expresados en unidades relativas:
3.4 Utilice unidades relativas en lugar de absolutas al especificar los valores en los atributos de los marcadores de lenguaje y en los valores de las propiedades de las hojas de estilo. [Prioridad 2]
Gracias de nuevo a Manuel por compartir los conocimientos que el resto absorbemos como parásitos [risa]. A ver si vuelve a poner en marcha Logicola cuanto antes.
Gracias, Gigo. Una información muy, pero que muy útil.
¿Qué pasa cuando no especificamos, como en este caso, una equivalencia? Tengo entendido que la medida «em» es relativa al tamaño de la letra «m» de la tipografía usada, pero el tamaño de dicha letra, ¿es relativa a qué? No todos lo navegadores la representan del mismo tamaño, ¿habrá forma de hacerla equivalente entre ellos (determinando su valor no en píxeles, sino en puntos, por ejemplo)?
De antemano gracias.
La unidad em indica el número de veces que se ha de aumentar el tamaño de la letra con respecto a al tamaño del elemento que lo contiene. Si el valor por defecto del navegador definido por el usuario es 16 píxeles, entonces cualquier elemento dentro del elemento <body> tendría este tamaño:
1em = 16px
2em = 32px
0.5em = 8px
Si a su vez defines un nuevo tamaño para un elemento - por ejemplo p - que este dentro de del elemento body, el elemento hijo establece su tamaño con respecto al padre. Por ejemplo, si el tamaño definido en el navegador de nuevo es 16px:
<body style="font-size:0.5em">
<p style="font-size:2em">
</body>
El elemento p va a tener un tamaño de 16px, no de 32px porque "hereda" el tamaño definido en el body (la mitad, 8px) y luego lo dobla (2x8=16px).
Más en la W3C CSS.
Se agradece al explicacion, llevaba mucho tiempo buscando una manera de usar unidades relativas en los tamaños de letra. Si hubiera opciones de voto, un 10 ;)