para - tamaño de letra html

Tamaños de fuente muy diferentes en navegadores

Question

Actualización : ejemplo de prueba simple agregado http://jsfiddle.net/7UhrW/1/ usando normalize.css.

Chrome / WebKit y Firefox tienen diferentes motores de renderizado que representan las fuentes de forma diferente, en particular con diferentes dimensiones. Esto no es demasiado sorprendente, pero lo que es sorprendente es la magnitud de algunas de las diferencias.

Siempre puedo ajustar elementos individuales en una página para que sean más similares, pero eso es tedioso, por decir lo menos. He estado buscando soluciones más sistemáticas, pero muchos recursos (por ejemplo, respuestas de SO) simplemente dicen "usar un paquete de reinicio". Aunque estoy seguro de que esto soluciona un montón de otras cosas como relleno y espaciado, no parece hacer ninguna diferencia para las dimensiones de la fuente.

Por ejemplo, si tomo el paquete de reinicio desde http://html5reset.org/ , puedo mostrar diferencias bastante grandes (tenga en cuenta las dimensiones de diseño que se muestran en los inspectores). [Las imágenes a continuación son en realidad de mayor resolución que las mostradas / redimensionadas en esta respuesta - por ejemplo, en Chrome puede hacer clic con el botón derecho y Abrir imagen en Nueva pestaña.]

<h1 style="font-size:64px; background-color: #eee;">Article Header</h1>

Con Helvetica, Chrome tiene la altura más baja en su lugar.

<h1 style="font-size:64px; background-color: #eee; font-family: Helvetica">Article Header</h1>

Con una fuente diferente , Chrome vuelve a mostrar una fuente mucho más alta, pero además el espaciado entre letras se vuelve loco (probablemente debido a la audacia de la fuente):

<style>
@font-face {
font-family: "MyriadProRegular";
src: url("fonts/myriadpro-regular-webfont.eot");
src: local("?"), url("fonts/myriadpro-regular-webfont.woff") format("woff"), url("fonts/myriadpro-regular-webfont.ttf") format("truetype"), url("fonts/myriadpro-regular-webfont.svg#webfonteknRmz0m") format("svg");
font-weight: normal;
font-style: normal; }
@font-face {
font-family: "MyriadProLight";
src: url("fonts/myriadpro-light-webfont.eot");
src: local("?"), url("fonts/myriadpro-light-webfont.woff") format("woff"), url("fonts/myriadpro-light-webfont.ttf") format("truetype"), url("fonts/myriadpro-light-webfont.svg#webfont2SBUkD9p") format("svg");
font-weight: normal;
font-style: normal; }
@font-face {
font-family: "MyriadProSemibold";
src: url("fonts/myriadpro-semibold-webfont.eot");
src: local("?"), url("fonts/myriadpro-semibold-webfont.woff") format("woff"), url("fonts/myriadpro-semibold-webfont.ttf") format("truetype"), url("fonts/myriadpro-semibold-webfont.svg#webfontM3ufnW4Z") format("svg");
font-weight: normal;
font-style: normal; }
</style>
...
<h1 style="font-size:64px; background-color: #eee; font-family: Helvetica">Article Header</h1>

Si tratamos de espolvorear en el sin unidades * { line-height: 1; } * { line-height: 1; } , tal como lo sugiere un comentario, vemos que si bien proporciona alturas idénticas, los desplazamientos verticales son diferentes, al igual que otros elementos en la página:

He intentado algunos restablecimientos / paquetes de normalización en vano. Solo quería confirmar aquí que esto es realmente un hecho de la vida (incluso omitir los delincuentes más flagrantes como IE y el móvil) y no me falta una solución estupenda para este desastre.

Answer 1

Use line-height de line-height sin unidad para el elemento BODY (o HTML ):

BODY {line-height: 1.25; }

Answer 2

Use Font-sites en pt en lugar de font-size:12pt