La misma fuente, excepto su peso, parece diferente en diferentes navegadores

El texto se muestra correctamente en Chrome. Quiero que se muestre de esta manera en todos los navegadores. ¿Cómo puedo hacer esto?

Cromo:
Cromo

ACTUALIZACIÓN: Solucionado en Safari con -webkit-font-smoothing: antialiased;

Firefox:
Firefox

Este es el CSS:

 font-family: Georgia; font-weight: normal; font-size: 16pt; color: #444444; -webkit-font-smoothing: antialiased; 

Y un violín: http://jsfiddle.net/jnxQ8/1/

Asegúrese de que la fuente sea la misma para todos los navegadores. Si se trata de la misma fuente, entonces el problema no tiene solución al usar CSS entre navegadores .

Como cada navegador tiene su propio motor de representación de fonts, todos son diferentes. También pueden diferir en versiones posteriores o en diferentes sistemas operativos.

ACTUALIZACIÓN : para aquellos que no entienden las diferencias de representación de fonts del navegador y el sistema operativo, lea esto y esto .

Sin embargo, la mayoría de la gente ni siquiera nota la diferencia, y los usuarios lo aceptan. Olvídese del diseño perfecto para todos los navegadores, a menos que sea:

  1. Intentando desactivar la renderización de subpixel por CSS (no todos los navegadores lo permiten y el texto puede ser feo …)
  2. Usar imágenes (los recursos son exigentes y difíciles de mantener)
  3. Reemplazar Flash (necesita algo de progtwigción y no funciona en iOS)

ACTUALIZACIÓN : Revisé la página de ejemplo. Ajustar el kerning por texto-rendering debería ayudar:

 text-rendering: optimizeLegibility; 

Más referencias aquí:

  1. Parte de la representación de fuente se controla mediante font-smoothing (como se mencionó) y otra parte es text-rendering . Ajustar estas propiedades puede ayudar ya que sus valores predeterminados no son los mismos en todos los navegadores.
  2. En el caso de Chrome, si todavía no se muestra OK para ti, prueba este hack de sombra de texto . Debería mejorar su renderizado de fonts de Chrome, especialmente en Windows. Sin embargo, text-shadow se volverá loco bajo Windows XP. Ten cuidado.

Con el fin de estandarizar mejor sus fonts embebidas @ font-face en todos los navegadores, intente incluir lo siguiente en su statement @ font-face o en el estilo de la fuente de su cuerpo:

 speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; 

En la actualidad parece que no hay una solución universal en todas las plataformas y comstackciones de navegadores. Como se indica con frecuencia, todos los navegadores / SO tienen diferentes motores de renderizado de texto.

Hay información excelente sobre esto aquí: https://bugzilla.mozilla.org/show_bug.cgi?id=857142

Todavía experimentando, pero hasta ahora una solución mínimamente invasiva, dirigida solo a FF es:

 body { -moz-osx-font-smoothing: grayscale; } 

Pruebe -webkit-font-smoothing: subpixel-antialiased;

Recopilé y probé soluciones discutidas:

Windows10 Prof. x64:

 * FireFox v.56.0 x32 * Opera v.49.0 * Google Chrome v.61.0.3163.100 x64-bit 

MacOs X Serra v.10.12.6 Mac mini (mediados de 2010):

 * Safari v.10.1.2(12603.3.8) * FireFox v.57.0 Quantum * Opera v49.0 

Semi (todavía micro grasa en Safari) resuelto fonts grasas:

 text-transform: none; // mac ff fix -webkit-font-smoothing: antialiased; // safari mac nicer -moz-osx-font-smoothing: grayscale; // fix fatty ff on mac 

No tener efecto visual

 line-height: 1; text-rendering: optimizeLegibility; speak: none; font-style: normal; font-variant: normal; 

Efecto visual incorrecto:

 -webkit-font-smoothing: subpixel-antialiased !important; //more fatty in safari text-rendering: geometricPrecision !important; //more fatty in safari 

¡no olvides establecer! importante al probar o asegúrate de que tu estilo no se anule

No creo que usar “puntos” para el tamaño de fuente en una pantalla sea una buena idea. Intente usar px o em en el tamaño de fuente.

De W3C :

No especifique el tamaño de fuente en pt u otras unidades de longitud absoluta. Se procesan de manera incoherente en todas las plataformas y el Agente de usuario no puede cambiar su tamaño (por ejemplo, el navegador).

Tengo muchos sitios con este problema y finalmente encontré una solución para las fonts de Firefox que son más gruesas que Chrome.

Necesitas esta línea al lado de tu corrección -moz-osx-font-smoothing: grayscale;

 body{ text-rendering: optimizeLegibility; -webkit-font-smoothing: subpixel-antialiased; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } 

Pruebe el text-rendering: geometricPrecision; .

Diferente del text-rendering: optimizeLegibility; , se encarga de los problemas de interletraje al escalar las fonts, mientras que el último habilita el interletraje y las ligaduras.