Tamaños de Fuentes Relativos（跨浏览器）

Posted 2021-02-27

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.

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