CSS fuente personalizada desplazamiento vertical (bug?)

Question

utilizo fuente personalizada en mi CSS con este método:

@font-face { 
    font-family: 'Gabriola'; 
    src: url('Gabriola.eot'); 
    src: url('Gabriola.eot?#iefix') format('embedded-opentype'), 
     url('Gabriola.woff') format('woff'), 
     url('Gabriola.ttf') format('truetype'); 
    font-weight: normal; 
    font-style: normal; 
} 
.gabriola { 
    font-size: 20px; 
    line-height: 20px; 
    height: 20px; 
    background: red; 
} 

<div class="gabriola">Some texty text here</div> 

Cada navegador hace esta Fuentes de su propia manera con desplazamiento vertical arriba y abajo como esto

¿Qué estoy haciendo mal? Gracias

Answer 1

Es posible que no haya nada que estés haciendo mal. Aquí hay algunos puntos que pueden aplicarse, algunos controlables por usted, otros no.

1. Para estar seguro, establezca explícitamente vertical-align: baseline.
2. Los diferentes archivos (.eof, .woff, .ttf) no se pueden definir de la misma manera, y por lo tanto diferentes navegadores utilizan diferentes archivos y muestran diferencias.
3. No estoy seguro de si es conveniente tener dos llamadas se src ensuciar las cosas, pero se puede intentar la eliminación de la segunda:

@font-face { 
    font-family: 'Gabriola'; 
    src: url('Gabriola.eot'), 
     url('Gabriola.eot?#iefix') format('embedded-opentype'), 
     url('Gabriola.woff') format('woff'), 
     url('Gabriola.ttf') format('truetype'); 
    font-weight: normal; 
    font-style: normal; 
} 

Todos estos son meras conjeturas. Deberá probar los números 1 y 3. Si el problema es el n. ° 2, no estoy seguro de que exista una solución elegante.

Hay, por supuesto, la advertencia sobre this site:

Tenga en cuenta que representación de fuentes puede variar ampliamente en todos los navegadores y sistemas operativos . Muchos desarrolladores han experimentado resultados tan pobres de Windows e Internet Explorer que evitan usar fuentes personalizadas en total. Siempre asegúrese de examinar los resultados de cerca en todos los navegadores que pueda para decidir si la calidad es aceptable.

actualización

This post da algunos consejos sobre la posibilidad de resolver los problemas de representación. Esto es para la fuente de ardilla, y él señala específicamente:

Si ha descargado el kit, puede intentar la regeneración de la fuente con el generador . Realizamos ajustes periódicos en el generador para que mejore la sugerencia o la representación de la fuente.

Pero también confirma,

No pasar la pelota, pero la causa más común es una mala fuente original.

Cuál va con mi punto # 2.

Answer 2

Tuve el mismo problema y la solución fue reconstruir la fuente con las propiedades del original sin cambiar nada en un archivo nuevo con Hight logic font creator, la fuente no se modificó e igual al problema original se corrigió y alineó a la perfección en todos los navegadores incluyendo ie6, fue el trabajo de unas pocas horas, pero este es el resultado en caso de que necesite algún usuario.

http://www.filefactory.com/file/1miw29cddg21/n/crossbrowser_gabriola_font.zip

Answer 3

sé que han pasado 5 años desde el OP hizo la pregunta, pero me encontré con este gran técnica en conseguir el texto de referencia alineados correctamente.

Básicamente, el contenedor de texto debe ser un bloque en línea con altura de línea: 0; A continuación, se crea un pseudo-elemento en línea-bloque y ajustar su altura de acuerdo con la línea de altura que quería:

span { 
 
    font-size: 2em; 
 
    background: red; 
 
} 
 
span.baseline-align { 
 
    vertical-align: baseline; 
 
} 
 

 
span.true-baseline-align { 
 
    display: inline-block; 
 
    line-height: 0; 
 
} 
 
span.true-baseline-align::after { 
 
    content: ''; 
 
    display: inline-block; 
 
    height: 1em; // this is where you control line-height 
 
}

<span>Normal text</span> 
 
<br><br> 
 
<span class="baseline-align">With vertical-align: baseline</span> 
 
<br><br> 
 
<span class="true-baseline-align">with trick to really baseline-align</span>

http://blogs.adobe.com/webplatform/2014/08/13/one-weird-trick-to-baseline-align-text/

No