Webfont Smoothing y Antialiasing en Firefox y Opera

Tengo algunos webfonts personalizados integrados en mi sitio y uso cosas como

//-webkit-text-stroke-width: .05px; //-webkit-text-stroke-color: white; -webkit-font-smoothing: antialiased; 

para diseñar mi salida de renderizado Esto funciona bien en Safari y Chrome. Obtuve bordes más nítidos y líneas más delgadas.

¿Hay alguna forma de hacer cosas así en Firefox? ¿O Opera?

Como Opera funciona con Blink desde la versión 15.0 -webkit-font-smoothing: antialiased también funciona en Opera.

Firefox finalmente ha agregado una propiedad para habilitar el antialiasing en escala de grises. Después de una larga discusión , estará disponible en la Versión 25 con otra syntax, que señala que esta propiedad solo funciona en OS X.

 -moz-osx-font-smoothing: grayscale; 

Esto debería corregir las fonts borrosas del icono o el texto claro en fondos oscuros.

 .font-smoothing { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } 

Puede leer mi publicación sobre la representación de fonts en OSX que incluye una mezcla de Sass para manejar ambas propiedades.

Bueno, Firefox no es compatible con algo así.

En la página de referencia de Mozilla, se especifica font-smooth ya que la propiedad CSS controla la aplicación de anti-aliasing cuando se procesan las fonts, pero esta propiedad se ha eliminado de esta especificación y actualmente no está en la pista estándar.

Esta propiedad solo es compatible con los navegadores Webkit.

Si quieres una alternativa, puedes verificar esto:

  • Text-Shadow Anti-Aliasing | Philip Renich, sitios web – blog
  • cufón – fonts para las personas

Caja: texto claro con fuente web irregular sobre fondo oscuro Firefox (v35) / Windows
Ejemplo: Google Web Font Ruda

Sorprendente solución –
agregando la siguiente propiedad a los selectores aplicados:

 selector { text-shadow: 0 0 0; } 

En realidad, el resultado es el mismo solo con text-shadow: 0 0; , pero me gusta establecer explícitamente blur-radius.

No es una solución universal, pero podría ayudar en algunos casos. Además, hasta ahora no he experimentado (ni probado a fondo) los impactos negativos en el rendimiento de esta solución.

Después de toparme con el problema, descubrí que mi archivo WOFF no se había realizado correctamente. Envié un nuevo archivo TTF a FontSquirrel, que me proporcionó un WOFF correcto que era fluido en Firefox sin agregar ningún CSS adicional.

Encontré la solución con este enlace: http://pixelsvsbytes.com/blog/2013/02/nice-web-fonts-for-every-browser/

Método paso a paso:

  • envía tu fuente a WebFontGenerator y obtén el código postal
  • encuentra la fuente TTF en el archivo Zip
  • luego, en Linux, haz este comando (o instálalo por apt-get install ttfautohint ):
    ttfautohint --strong-stem-width=g neosansstd-black.ttf neosansstd-black.changed.ttf
  • luego, una más, envíe el nuevo archivo TTF (neosansstd-black.changed.ttf) en WebFontGenerator
  • ¡obtienes un Zip perfecto con todas tus webfonts!

Espero que esto sea de ayuda.

Cuando el color del texto es oscuro, en Safari y Chrome, obtengo mejores resultados con la propiedad text-stroke css.

 -webkit-text-stroke: 0.5px #000; 

… en la etiqueta del cuerpo y estos a partir del contenido y el tipo de letra se ve mejor en general …

 body, html { width: 100%; height: 100%; margin: 0; padding: 0; text-rendering: optimizeLegibility; text-rendering: geometricPrecision; font-smooth: always; font-smoothing: antialiased; -moz-font-smoothing: antialiased; -webkit-font-smoothing: antialiased; -webkit-font-smoothing: subpixel-antialiased; } #content { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } 

Añadiendo

 font-weight: normal; 

Para tus fonts @ font-face corregirá la apariencia en negrita en Firefox.