css - poner - fuentes web

fuentes personalizadas con diferentes métricas verticales entre sistemas operativos

Question

Estoy tratando de incluir una fuente personalizada para una página que estoy construyendo. Mi problema es que la alineación vertical de la fuente parece diferente en mi máquina de desarrollo ubuntu y en la de Windows PC.

Primero, aquí están las imágenes para entender el problema

Editar: lamentablemente como nuevo usuario no puedo publicar imágenes, así que aquí hay una descripción:

El problema es la distancia entre la fuente de las fuentes y el elemento debajo de ella. Hay una brecha inexplicable en mi máquina ubuntu que no es un relleno / margen. Incluso si selecciona el texto, se ve desalineado.

Ambos probaron en Chrome, el mismo html / css detrás de él (es la misma página). Sin márgenes inferiores / relleno tanto en el código como en la herramienta del inspector de cromo. La misma altura de línea. La fuente es Museo. Ambos cargan la versión .woff de la fuente. Cualquier otra información, me gustaría proporcionarla.

El CSS para importar la fuente es:

@font-face {
  font-family: ''Museo-700'';
  src: url(''path-to-eot'');
  src: url(''path-to-eot?'') format(''embedded-opentype''),
       url(''path-to-woff'') format(''woff''),
       url(''path-to-ttf'') format(''truetype'');  
}

El problema persistió incluso cuando eliminé la declaración de woff y ttf proporcionaba la fuente.

Estoy realmente perdido con esto, no tengo idea de cómo puedo hacer lo mismo. ¡Cualquier tipo de ayuda sería muy apreciada!

Answer 1

Las fuentes tienen tres conjuntos de información de métricas verticales integradas. Un set para Mac, un set para PC y otro set típicamente usado por * nix. Estos pueden ser difíciles de sincronizar, pero nuestro Generador Font-Face intenta hacer que estos valores sean los mismos. ¿Darle una oportunidad?

http://www.fontsquirrel.com/fontface/generator

Más información del equipo de tipo de Google:

http://code.google.com/p/googlefontdirectory/wiki/VerticalMetricsRecommendations

Answer 2

Tuve el mismo problema con esta fuente: http://www.fontsquirrel.com/fonts/Symbol-Signs

Descargué el kit preempacado @ font-face y las métricas fueron inconsistentes entre Mac y PC.

La solución fue sacar la fuente TTF del kit descargado y usarla para exportar un nuevo kit @ font-face con el generador de Font Squirrel. El generador tiene una casilla de verificación en la Configuración de experto etiquetada como "Reparar métricas verticales". Asegúrese de que esto esté marcado antes de generar su kit.

Answer 3

Establezca un valor fijo, por ejemplo, en px, para la propiedad css de altura de línea .