Fuente: las métricas verticales deficientes provocan un procesamiento de altura de línea inconsistente en todos los navegadores. ¿Solución?

Después de horas de depuración y búsqueda descubrí que es imposible alinear verticalmente una fuente con una fuente pobremétricas verticales consistentemente en todos los navegadores. Si una fuente tiene pobremétricas verticales se puede representar demasiado arriba o demasiado abajo y se ve horrible, especialmente dentro de los botones. No hay forma de resolver este problema con css solo.

Puede verificar las métricas verticales de una fuente con las pruebas en este sitio web:http://levien.com/webfonts/vmtx/ (Simplemente descargue una prueba y reemplace la fuente.)

Este es el resultado que obtengo. El superior tiene métricas deficientes y el de abajo las tiene correctas: (ambas tienen una altura de línea fija)

Ardilla ofrece una solución para los pobresmétricas verticales en su generador en modo experto. Desafortunadamente, la fuente que tengo que usar pertenece a Microsoft (SegoePrint) y está en la lista negra de Fontsquirrel para el generador.

Actualizar:

Para aclarar el problema ... esta es la situación que estoy enfrentando en este momento:

Estoy tratando de alinear verticalmente el texto del botón en el medio (ver imagen a continuación). A la izquierda, verá cómo se representa en Chrome en Android, a la derecha, verá cómo se representa en Chrome en Windows. Las fuentes Arial y más comunes están bien centradas, Segoe Print no lo es.

Probé diferentes enfoques en CSS para la alineación y ninguno funcionó de manera consistente. También lo probé dentro de un violín con el mismo resultado, que no puedo mostrar ya que la fuente no es libre. Este es un problema específico de la fuente y la única solución parece ser arreglar la fuente en sí.

Este es el CSS para el botón (los valores son ficticios):

div.parent {
    height:40px
}
h3 {
    line-height: 40px;
    font-size: 14px
}

Respuestas a la pregunta(1)

Su respuesta a la pregunta