Suavizado y suavizado de fuentes web en Firefox y Opera

Utilizo fuentes web personalizadas en mi sitio. Para diseñar mi salida de renderizado, utilicé el siguiente código:

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

Esto funciona bien en Safari y Chrome (los bordes son más nítidos y las líneas más delgadas). ¿Hay alguna forma de implementar el mismo estilo en Firefox y Opera?

Como Opera funciona con Blink, la versión 15.0 -webkit-font-smoothing: antialiasedtambién funciona en Opera.

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

-moz-osx-font-smoothing: grayscale;

Esto debería corregir las fuentes de iconos borrosos o el texto claro sobre fondos oscuros.

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

Puede leer mi publicación sobre la representación de fuentes en OSX, que incluye un mixin Sass para manejar ambas propiedades.

Bueno, Firefox no es compatible con algo así.

En la página de referencia de Mozilla se especifica font-smoothque la propiedad CSS controla la aplicación de suavizado cuando se renderizan las fuentes, pero esta propiedad se ha eliminado de esta especificación y actualmente no se encuentra en la pista estándar.

Esta propiedad solo es compatible con los navegadores Webkit.

Si desea una alternativa, puede marcar esto:

• Suavizado de sombras de texto | Philip Renich, Sitios web - blog
• cufón - tipografías para la gente

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

Solución sorprendente:
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 el radio de desenfoque.

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

Después de encontrarme con el problema, descubrí que mi archivo WOFF no se hizo correctamente, envié un nuevo TTF a FontSquirrel que me dio un WOFF adecuado que fue fluido en Firefox sin agregarle 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íe su fuente a un WebFontGenerator y obtenga el zip
• busque la fuente TTF en el archivo Zip
• luego, en linux, haga este comando (o instale por apt-get install ttfautohint):
  ttfautohint --strong-stem-width=g neosansstd-black.ttf neosansstd-black.changed.ttf
• luego, uno más, envíe el nuevo archivo TTF (neosansstd-black.changed.ttf) en WebFontGenerator
• ¡Obtienes un Zip perfecto con todas tus fuentes web!

Espero que esto sea de ayuda.

... en la etiqueta del cuerpo y estos 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;

}

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

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

Añadiendo

font-weight: normal;

A su @ font-face, las fuentes arreglarán la apariencia en negrita en Firefox.