css - google - font-weight

Los Webfonts de Google funcionan de forma diferente en Firefox, Chrome y Opera

Question

Estoy teniendo algún problema con los servidores web de Google.

Estoy usando Google Webfont llamado ''Bitter''. Pero en Firefox y Chrome se está procesando de manera diferente. Chrome y Opera parecen renderizarlo de manera similar. No es drásticamente diferente, pero está estropeando el formato y la composición de los párrafos.

Aquí está el CSS:

.small-col h3{

color: #606060;
font-family: ''Bitter'', Georgia, "Times New Roman", Times, serif;
font-size: 16px;
line-height: 20px;
margin-bottom: 2px;
letter-spacing: -0.06em;

}

Y aquí hay una captura de pantalla del problema del que estoy hablando: http://i49.tinypic.com/2u46mpi.png

¿Alguien podría sugerir cómo puedo obtener un renderizado consistente tanto en Firefox, Chrome y Opera?

Gracias

Answer 1

Las fuentes nunca se mostrarán de la misma forma en todos los navegadores. Usan diferentes motores de renderizado: intentar que los sitios web se vean idénticos en todos los navegadores es una causa perdida.

Para su problema específico, utilice un espacio sin interrupciones para evitar que el contacto y nosotros se separen.

<p> ... contact&nbsp;us </p>

Answer 2

Parece que Firefox está haciendo que el peso sea un poco diferente, y el espacio un poco diferente también. Tal vez intente definirlos numéricamente, también, para anular cualquier valor predeterminado del navegador. Desafortunadamente, a los diferentes navegadores y especialmente a los sistemas operativos les gusta renderizar las fuentes de forma diferente y por sus propias reglas a veces.

Answer 3

Puede haber diferencias en la representación de fuentes entre los navegadores, aunque con mayor frecuencia, existen diferencias entre las plataformas.

Sin embargo, aquí la diferencia parece ser causada por el espaciado entre letras. Más exactamente, Firefox lo aplica correctamente, los navegadores WebKit no lo hacen. Para el tamaño de fuente de 16px , -0.06em debería dar como resultado poco más de un píxel, y si usa el modo de inspección (F12, estilo calculado), verá que Firefox aplica -1px mientras que Chrome usa normal (es decir, cero) para la letter-spacing Chrome parece tener algún umbral en el valor del espacio entre letras; por lo que solo -0.065em cambia las cosas.

Entonces, especialmente si prefiere la representación de Chrome, simplemente omita el letter-spacing . Por lo general, es mejor evitar el espacio entre letras: el diseñador de fuentes debería saberlo mejor, y si está de acuerdo con sus elecciones, use otra fuente, en lugar de tratar de "arreglar" la fuente.

Una de las diferencias entre los navegadores es que Firefox aplica el kerning por defecto, otros navegadores no. Pero esto no es relevante para los textos específicos en el ejemplo, ya que la tabla de interletraje para Bitter tiene pares de letras mayúsculas solamente (por lo que "VA" se vería diferente, por ejemplo).

Answer 4

Intente agregar el código google webfonts al encabezado de su sitio web utilizando el código javascript proporcionado, en lugar de css o @import.

Esto resolvió mi problema en este tema.

Answer 5

Tuve el mismo problema con la fuente serif. Si escribe "serif" lugar de serif (sin ""), Chrome mostrará lo mismo que Firefox.