2012-10-03 74 views
6

Así que estoy desarrollando un sitio que tendrá que funcionar en una multitud de navegadores, ya sean de escritorio, móviles o lo que sea. Los diseñadores, como los diseñadores de mac a menudo lo harán, han usado Helvetica Neue como fuente para todo el sitio. Estoy tratando de hacerlo funcionar a través de la inclusión de @font, y está apareciendo bien ... pero las alturas de línea me están dando una úlcera.¿Cómo puedo estandarizar las alturas de línea Helvetica Neue entre navegadores (no sobre texto en negrita)?

Vea la imagen de abajo, esta es Arial, Helvetica Neue Std y Helvetica Neue Pro. Windows Chrome maneja los tres como un campeón, pero el resto aquí son muy inconsistentes. Todos están configurados para una altura de línea de 18px en este momento, también probé la altura de línea: 1, pero fue en vano.

Aw Nuts

El HTML/CSS que estoy usando para los fines de esta prueba:

<style type="text/css"> 

    @font-face { font-family: "Helvetica Neue Std"; src: url('HelveticaNeueLTStd-Md.otf') format("opentype"); } 
    @font-face { font-family: "Helvetica Neue Pro"; src: url('HelveticaNeueLTPro-Md.otf') format("opentype"); } 

    .box { 
     float: left; 
     padding: 10px; 
     border: 1px solid red; 
     font-size: 18px; 
     line-height: 18px; 
    } 

    .box .text_1 { font-family: Arial; } 
    .box .text_2 { font-family: "Helvetica Neue Std" } 
    .box .text_3 { font-family: "Helvetica Neue Pro" } 

</style> 

<div class="box"> 
    <span class="text_1">Aw Nuts</span> 
</div> 

<div class="box"> 
    <span class="text_2">Aw Nuts</span> 
</div> 

<div class="box"> 
    <span class="text_3">Aw Nuts</span> 
</div> 

solo estoy fuera de suerte aquí? Estoy considerando usar Arial en este momento, porque tratar de hacer barras de herramientas y botones donde el texto se centra verticalmente está demostrando ser una pesadilla. I ciertamente no quiero olfatear para el sistema operativo y el navegador y escribir líneas de altura personalizadas para cada elemento.

+0

Ha intentado dimensionar la fuente y el line-height en ems? – Erik

+0

@Erik, acabo de probar eso, usando 1.1em en lugar de 18px. Hubo algunos cambios de 1px aquí y allá, pero en general el efecto fue el mismo. – Tathanen

+0

Creo que este problema podría ser más amplio que la altura de línea. Podría ser la forma en que el navegador está representando la fuente, en cuyo caso podría ser un trabajo de hack para lograr algo que debería ser bastante simple. Intente incluir una fuente a través de http://www.google.com/webfonts para ver si tiene el mismo problema. –

Respuesta

2

puedo ofrecer esta pieza de fondo en profundidad sobre why line height is a pain.

En resumen, las diferentes formas en que los navegadores manejan las métricas de espacio vertical pueden ser la causa de estas incoherencias. Algunos calculan desde la parte superior del ascendente más alto de la fuente y agregan todo el espacio de línea debajo, mientras que otros dividen el espaciado antes y después de la línea de texto.

+0

Creo que he leído esto antes, pero gracias por el enlace. Parece que no tengo suerte, cuando se trata de eso. Arial es! – Tathanen

0

Por favor, intente esto.

*{ 
    margin: 0px; 
    padding: 0px; 
    font-size: 100%; 
    vertical-align: baseline; 
} 

font-size: 100% restablecerá automáticamente sus fuentes por defecto y hay que especificar manualmente tamaño de fuente en un div p etc.

+0

Gracias por la idea, pero mientras se tensan las cosas aquí y allá, la disparidad entre navegadores permanece. – Tathanen

0

Parece un problema vertival metrics. La fuente nunca se alineará correctamente porque tiene métricas verticales pobres. La única forma de obtener la fuente representada consistentemente en todos los navegadores es corregir sus métricas verticales.

La mayoría de los proveedores de fuentes le permiten actualizar y corregir métricas verticales de una fuente antes de descargarla. Sin embargo, pueden llamar a esa opción de manera diferente. Por ejemplo, Fontsquirrel lo llama Auto-Adjust Vertical Metrics, myFonts.com lo llama Line Height Adjustments.

Font: poor vertical metrics cause inconsistent line-height rendering across browsers. Solution?

Cuestiones relacionadas