¿Cómo puedo estandarizar las alturas de línea Helvetica Neue entre navegadores (no sobre texto en negrita)?

Question

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.

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.

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.

Answer 1

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.

Answer 2

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.

Answer 3

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?