incluir - fuentes css

Espaciado de letras aleatorias al usar font-face

Question

Estoy usando CSS así:

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

html, 
body
{
    line-height: 1;
    margin: 0;
    padding: 0;
    font: 15px Chocolat, Arial, Helvetica, sans-serif;
    color: #000000;
}

La página se ve correcta la mayor parte del tiempo en IE7, IE8, IE9 y las últimas versiones de FireFox y Chrome. Cada pocas veces que se carga una página, algunas o todas las páginas tendrán áreas donde el espaciado entre cada letra está desactivado. A veces, 2 letras se amontonan juntas, y las siguientes 2 letras tienen mucho espacio extra (algunos píxeles, pero obvio y feo). No soy positivo, pero creo que solo está sucediendo en IE8, y posiblemente en modo compatibilidad y tampoco en modo compatible. Es bastante aleatorio, tan difícil de revisar rápidamente en este momento.

No tengo forma de abrir los otros formatos, pero cuando abro el formato TTF en Windows dice "OpenType" en el área del título, pero luego en los detalles dice "Diseño OpenType, contornos TrueType". Sé muy poco sobre la creación de fuentes, acabo de obtener esto del artista y luego usé fontsquirrel.com para crear las otras.

Otro devloper recomendó letter-spacing pero eso solo parece ayudar cuando las cosas se ven bien, no cuando se pone en este modo de espaciado entre letras aleatorias.

Editar: fotos agregadas

Simplemente haciendo clic en el sitio a veces la página se carga como esta (esto era IE8 no en modo compatibilidad). Mira la palabra "Comenzar", el S y el T son muy ajustados. Luego, la palabra "Qué" hay demasiado espacio entre W y h. En el lado derecho, la palabra "Otorgado" también se ve muy diferente a la de la siguiente imagen. La fecha en el lado derecho se ve tan mal que ni siquiera pensaría que habría una configuración de CSS que te permitiera hacer eso, ¿cómo se llamaría? make-my-page-horrible: verdadero;

Todo lo que hice fue presionar F5 para volver a cargar la página y se ve bien:

Answer 1

Cambiando esto:

html, 
body
{
    line-height: 1;
    margin: 0;
    padding: 0;
    font: 15px Chocolat, Arial, Helvetica, sans-serif;
    color: #000000;
}

a esto:

html, 
body
{
    line-height: 1;
    margin: 0;
    padding: 0;
    font: 15px Chocolat;
    color: #000000;
}

Así que solo la fuente: línea, parece haber solucionado el problema.

Supongo que IE8 debe hacer algunos cálculos de diseño iniciales usando una de las fuentes de respaldo, probablemente Arial, y luego tratando de ajustar (de una manera mala). Hubiera supuesto que si era la primera carga de la página, pero eso no es cuando sucede. Sucede en algún momento casi aleatorio después de eso. Pude recrear cada vez con estos pasos antes de aplicar la corrección:

1. Abrir página principal: en este punto, las fuentes se veían bastante bien, tal vez un poco más pequeñas de lo que deberían ser.

2. Haga clic en el enlace en la página principal que acaba de volver a cargar la misma página (no sucedió si utilicé F5 para actualizar).

--en este punto, las fuentes se veían muy mal, como mi ejemplo anterior

1. Haga clic en el mismo enlace otra vez

--en este punto las fuentes parecían perfectas

Podría cerrar y volver a abrir el navegador, o simplemente presionar F5, luego repetir los pasos anteriores una y otra vez con los mismos resultados cada vez.

Cambió la línea en el CSS y ahora no se puede volver a crear.