tricks - font smoothing css w3schools

Webfont Smoothing y Antialiasing en Firefox y Opera

Question

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?

Answer 1

... 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;

}

Answer 2

Añadiendo

font-weight: normal;

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

Answer 3

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 fuentes, 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 - fuentes para las personas

Answer 4

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 discussion , estará disponible en la Versión 25 con otra sintaxis, que señala que esta propiedad solo funciona en OS X.

-moz-osx-font-smoothing: grayscale;

Esto debería corregir las fuentes 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 fuentes en OSX que incluye una mezcla de Sass para manejar ambas propiedades.

Answer 5

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;

Answer 6

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

Answer 7

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.

Answer 8

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.