Suavizado y suavizado de fuentes web en Firefox y Opera

112

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?

mate
fuente
5
Sería una buena idea dejar de hacer eso y leer por qué aquí: usabilitypost.com/2012/11/05/stop-fixing-font-smoothing
fregante
20
^ esta es una generalización amplia y está bien usar el suavizado de fuentes. Es el problema de la representación el problema, no el comportamiento del diseñador. Cuando diseña un diseño y la fuente parece ser semi-negrita debido al motor de renderizado, es el motor el que necesita arreglarse, no el diseño.
Dylan
1
No es del todo una generalización amplia. El artículo dice que la representación de subpíxeles estaba destinada principalmente a hacer que el texto claro sobre fondos oscuros sea más legible (es decir, accesible), y hacer que una definición amplia de CSS body { -webkit-font-smoothing: antialiased; }sea ​​demasiado dura.
Matt Scheurich
3
Mis fuentes web que son oscuras sobre fondos claros también se están poniendo "en negrita falsa". Digo "suavizado" por todas partes.
Jason T Featheringham
5
Cómo se muestra una página depende del diseñador, incluidos todos los atributos tipográficos. Es su responsabilidad garantizar la usabilidad, la coherencia y el atractivo en la más amplia gama de plataformas. El acceso a los atributos de suavizado de fuentes a través de CSS permite un mayor control. Como todo, puede ser mal utilizado en las manos equivocadas. Pero promocionar la filosofía personal en lugar de responder a la pregunta no es útil.
Beejor

Respuestas:

193

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.

Maximilian Hoffmann
fuente
6
¿Por qué OSX solamente?
Yassir Ennazk
7
Windows y Linux utilizan diferentes algoritmos de representación para fuentes que OSX.
Maximilian Hoffmann
15

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:

Jonathan Naguin
fuente
2
Bueno, el problema que tengo es que mis fuentes se ven "en negrita" e hinchadas en Firefox y Opera. Con -webkit-font-smoothing:antialiased;podría arreglarlo en Safari y Chrome. Me encantaría encontrar cualquier "truco" para hacer que mis fuentes sean un poco más ligeras también en Firefox. Pensé en aplicarle un blanco text-shadowsolo en moz, pero no hay forma de aplicar una sombra de texto "insertada" que haga la fuente más clara.
Matt
1
@matt Puede probar algunos consejos de CSS en esta pregunta: stackoverflow.com/questions/761778/… Tal vez encuentre alguna alternativa de CSS.
Jonathan Naguin
11

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.

Volker E.
fuente
No hace nada para ayudar
vsync
esto provocará fuentes más audaces en Chrome según la fuente
Ben Sewards
1
@BenSewards ¿Proporcionaría una fuente en la que se encontró con una representación de fuente más audaz? ¿O quizás incluso un CodePen? Gracias por adelantado.
Volker E.
1
@VolkerE. gracias por la gran solución. Tengo el mismo problema molesto con la fuente Source Code Pro en un encabezado fijo. Cuando me desplazo, la fuente se vuelve muy pequeña y con su sombra de texto, la fuente no causa ningún problema.
Evolutio
En Chrome actual (58.0.3029.110), el texto "suave" en realidad se ve realmente horrible. (el texto "irregular" es algo mejor)
RecursiveExceptionException
7

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.

azenet
fuente
¿está en windows?
Vignesh
5

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.

Plici Stéphane
fuente
Hizo un gran trabajo al arreglar las irregularidades de la fuente durante las transiciones CSS (aunque no lo eliminó por completo). Usé el generador FontSquirrel con la opción TTFAutohint
Andrey
Usé Fontie para volver a generar mis archivos WOFF, WOFF2, EOT y SVG con autohint para Windows habilitado.
Dominique
4

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

}
usuario3634787
fuente
2
Lo siento ... ¿qué es "reinschreiben"? La mayoría de nosotros no hablamos alemán, por lo que sería bueno que hicieras toda la publicación en inglés.
Rayryeng
3
Oh, por favor, me disculpo había traducido con Google y de alguna manera la palabra incorrecta desde que se deslizó :)
user3634787
3

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;
Christelle
fuente
La pregunta es sobre Firefox y Opera. entonces esta respuesta no tiene nada que ver con la pregunta
vsync
-4

Añadiendo

font-weight: normal;

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

Aarón VIII
fuente
7
font-weight(como era de esperar) afecta al peso de la fuente, no al suavizado de la fuente. Agregarlo a las declaraciones de @ font-face causará confusión si el archivo de fuente vinculado no es un archivo de fuente de peso normal.
Mike Meyer
@MikeMeyer En realidad, estoy de acuerdo con el comentario de Aaron. Agregar font-weight: normal a una fuente incluida que es una fuente "ligera" parecería agregar confusión, pero solo debería confundir al desarrollador novato. En realidad, es una buena práctica especificar un valor predeterminado de normal en mi experiencia. Normal en este caso se refiere a "normal" para la fuente incluida y los caracteres que se utilizan, y no pretende especificar información sobre la fuente en sí. En muchos casos (particularmente en plataformas grandes) reducirá la probabilidad de errores provenientes de la típica arquitectura mala que se ve en los estilos de fuente.
dudewad
De hecho, el nombre de la fuente en sí debe indicar el peso de la fuente por defecto ...!
dudewad
@dudewad, eso es genial que estés de acuerdo, y sí, es un “consejo profesional” decente (aunque bastante conciso) sobre font-weight. La cuestión es que OP no font-weightpreguntaba sobre el antialiasing . Esta es una respuesta correcta para una pregunta completamente diferente.
Mike Meyer
@MikeMeyer, tienes toda la razón. A veces me dejo llevar un poco. ;)
dudewad