Posted By

Eloi on 06/30/06


Tagged

css crossbrowser fuente em pixel


Versions (?)

Who likes this?

17 people have marked this snippet as a favorite

xaviaracil
alvaroisorna
Eloi
katxorro70
Navegante
doctorlogos
postNuKe
aurele
saveasraw
guerrera
zensir
pokpok
Hirmine
hollowmyth
manub
isaac
m4tik


Tamaños de Fuentes Relativos (Cross-Browser)


 / Published in: CSS
 

Una manera sencilla y muy limpia para utilizar tamaños de fuentes relativos y que todos los navegadores muestren el mismo tamaño de letra.

Solo hay que asignar al "body" un tamaño de letra en "%" y luego al resto de elementos asignarle otro tamaño en "em:s".

Si el % en el body es de "62.5%" y a una clase se le asigna "1em" el resultado es una fuente de 10px.

Visto en "http://friendlybit.com/css/reminder-cross-browser-font-sizes/" y probado para IE6, IE7 Beta 3, Firefox 1.5 y Opera 9.

  1. /* Asignamos el tamaño en tanto por ciento en el body */
  2. body { font-size: 62.5%; }
  3.  
  4. /* El resto de tamaños los tenemos que poner como em con un solo decimal como máximo */
  5. p { font-size: 1em; }
  6. h1 { font-size: 2em; }
  7. h2 { font-size: 1.8em; }
  8. ...

Report this snippet  

You need to login to post a comment.