html5 - tipo - fuentes personalizadas css
¿Cómo renderizar fuentes delgadas con mayor suavidad en CSS 3 en Windows? (8)
Creo que esto es más un problema de Windows que un problema del navegador. Los mismos navegadores reproducen las mismas fuentes con mucha más facilidad en otros sistemas operativos, como Linux o Mac.
En Chrome, y por extensión en cualquier navegador webkit, puede usar el siguiente código para suavizar sus fuentes:
-webkit-font-smoothing: antialiased;
o
-webkit-font-smoothing: antialiased !important;
Por lo general, me parece que esto no hace mucho. Creo que tendremos que esperar a que Microsoft haga algo al respecto.
Cuando diseñé mi sitio web en Adobe Flash Pro CS6, la fuente se ve así:
La fuente se ve lisa y ligeramente más gruesa, y cuando creo HTML y CSS para renderizar la fuente en un navegador, aparece así, respectivamente, en IE, Firefox y Chrome.
Parece más delgado y pixelado en algunas áreas. He visto un renderizado de fuentes mucho más suave en OS X. ¿Cómo puedo hacer que la fuente parezca más suave en estos navegadores? Asumo que este es un problema con ClearType, que se ve horrible con fuentes delgadas como esta.
Aquí está el código que estoy usando para probar, para que las respuestas puedan ser probadas antes de ser publicadas:
<html>
<head>
<link href=''http://fonts.googleapis.com/css?family=Lato:300'' rel=''stylesheet'' type=''text/css'' />
</head>
<body>
<span style="color: #333; font-family: Lato; font-size: 32px;">Question or concern?</span>
</body>
</html>
En Google Chrome, puede agregar -webkit-text-stoke para mejorar la apariencia de las fuentes.
por ejemplo:
-webkit-text-stroke: .025em rgba(51,51,51,0.50);
Es posible que pueda solucionar esto utilizando la representación de texto de la propiedad css.
Ejemplo:
text-rendering: auto
text-rendering: optimizeSpeed
text-rendering: optimizeLegibility
text-rendering: geometricPrecision
text-rendering: inherit
Probablemente quieras usar text-rendering: optimizeLegibilty.
Más información aquí: MDN Text-Rendering
Me encontré con un problema similar recientemente, la misma familia de fuentes y el tamaño se veía diferente en Chrome, Safari y Firefox. El cromo y el firefox se ven especialmente espesos. Esta podría no ser la mejor manera, pero funcionó para mí
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: unset;
-moz-osx-font-smoothing: grayscale;
font-smoothing: antialiased;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
Además, vale la pena un tiempo para la compra de diferentes motores de renderizado. CSS ¿Qué son -moz- y -webkit-?
No hay una solución única para esto, por lo que yo sé. Se implementaron varias correcciones para adaptarse a cada navegador, excepto IE. Dale una oportunidad:
Para Chrome y cualquier otro navegador que use webkit:
-webkit-font-smoothing:antialiased !important;
Coloca eso en tu CSS html, o para cualquier elemento que te parezca adecuado. También puede agregar esto junto con lo anterior:
text-shadow:1px 1px 1px 1px rgba(0,0,0,0.005);
Experimenta con diferentes valores alfa, pero debes mantener los tamaños de sombra como están.
No estoy al tanto de nada más que puedas hacer, pero esto debería resolver el mayor problema con Chrome como mínimo (además de otros navegadores webkit).
Nunca va a conseguir que los sitios se vean iguales en diferentes navegadores o sistemas operativos, están usando diferentes tecnologías, etc.
Esto es algo que realmente no deberías preocuparte . Las personas que usan IE no van a cambiar a Firefox o Chrome o viceversa. Están acostumbrados a la forma en que se ven las fuentes y no las van a notar.
Las incoherencias de los navegadores son algo con lo que los desarrolladores tienen que vivir (por desgracia). Es genial si todos se ven iguales pero eso no va a suceder
Cosas que puedes probar, probablemente necesites diferentes soluciones para diferentes navegadores .:
text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
text-rendering: optimizeLegibility !important;
-webkit-font-smoothing: antialiased !important;
Editar 1: DirectWrite ahora está en Chrome para Windows, lo que mejorará la renderización.
Edición 2 (2017): fuentes de la IU del sistema
Otra cosa que puedes probar es usar fuentes del sistema para mejorar el UX.
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
Readup - smashingmagazine
Readup - booking.com
Readup - medio
Uso esto en todos los sitios y cubre la mayoría de los problemas con el procesamiento de fuentes.
text-rendering: optimizeLegibility !important;
-webkit-font-smoothing: antialiased !important;
-moz-osx-font-smoothing: grayscale !important;
texto-rendering: optimizeLegibility aplica interletraje a la fuente, lo que puede mejorar la legibilidad, pero solo si la resolución de la pantalla y el tamaño de letra es lo suficientemente alta. No hace que la fuente sea más audaz si antes era demasiado delgada.
El problema aquí podría ser las familias de fuentes que tienen una o más caras que son más livianas de lo normal (font-weight: 400), como Googles Lato.
Si cargas toda la luz a las caras normales de Lato como esta
@import url(http://fonts.googleapis.com/css?family=Lato:100,200,300,400);
Hice la observación de que la mayoría de los navegadores de Windows y Chrome OSX usan font-weight: 100 si especificas algo más ligero que 400 - (o normal, regular). Cambiar el peso de la fuente: a 200 o 300 no representa ninguna diferencia, aunque las herramientas del inspector insisten en que la máquina muestra, p. Ej., Font-weight: 200. Lo cual no es
Eliminar los pesos más claros (100 en mi caso) resuelve el problema y, al menos, me permite usar font-weight: 200, respectivamente. La representación no es absolutamente idéntica en todos los navegadores, pero al menos es similar.
@import url(http://fonts.googleapis.com/css?family=Lato:200,300,400);
Esto, por supuesto, no resuelve el problema real al no poder acceder a los pesos de letra claros como se especifica.