2012-04-06 17 views
6

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.fuentes personalizadas con diferentes métricas verticales entre OS

En primer lugar, aquí están las imágenes para entender el problema

Editar: por desgracia, como un nuevo usuario que no puedo publicar imágenes, por lo que aquí hay una descripción:

La cuestión es la distancia entre las fuentes línea de base y el elemento debajo de él. Hay una brecha inexplicable en mi máquina ubuntu que no es un relleno/margen. Incluso si selecciona el texto, se ve desalineado.

Ambos probado en Chrome, el mismo html/css detrás de él, por supuesto (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 quité la declaración woff y ttf estaba dando la fuente.

Estoy realmente perdido con esto, no tengo idea de cómo puedo hacerlo de la misma manera. ¡Cualquier tipo de ayuda sería muy apreciada!

+0

Puede publicar enlaces a imágenes y alguien con más representantes puede editarlas en su publicación. –

Respuesta

8

Las fuentes tienen tres conjuntos de información de métricas verticales incrustadas. 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 Google:

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

+0

Vi su comentario demasiado tarde para ser sincero, pero ya había usado su generador y resolvió mi problema. Excelente herramienta, muchas gracias por brindarnos :) –

+0

¡Muchas gracias! Resolvió también mi problema con las métricas de fuentes; obviamente utilicé un convertidor malo antes de este. –

+1

¿Hay algún otro convertidor con la opción Métrica vertical distinta de fontsquirrel? Como no me permite convertir fuentes comerciales. –

3

Yo tenía el mismo problema con esta fuente: http://www.fontsquirrel.com/fonts/Symbol-Signs

he descargado el kit de fuentes cara preenvasados ​​@ y las métricas eran 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.

+1

¡Tuve este mismo problema! ZOMG tema twinzzzz !!! Pensé que era el único. La fuente con la que tuve problemas fue: http: //www.fontsquirrel.com/fonts/antonio –

+0

¿Solucionaron esto para Antonio? Debido a que hice lo que peterhry sugirió, vuelva a generar los diferentes archivos de archivos web con la opción "Reparar métricas verticales", pero el mismo problema persiste ... – yorbro

0

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

Cuestiones relacionadas