We Recommend

CSS: The Definitive Guide
Provides you with a comprehensive guide to CSS implementation, along with a thorough review of all aspects of CSS 2.1. Updated to cover Internet Explorer 7, Microsoft's vastly improved browser, this new edition includes content on positioning, text wrapping (nowrap), lists and generated content, table layout, user interface, paged media, and more.

Posted By

Eloi on 06/30/06

Tagged

css crossbrowser fuente em pixel

Versions (?)

Who likes this?

16 people have marked this snippet as a favorite

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

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.

Plain TextExpand

/* 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; }
...

Report this snippet

Comment:

You need to login to post a comment.