css - iconos - Usar una fuente de icono(Fuente impresionante) se ve un poco borrosa y demasiado audaz

iconos html para web

Question

Estoy usando Font Awesome para crear íconos en mi sitio, y aunque se ven fantásticos en el iPod Touch con pantalla Retina, en mi iMac se ven un poco borrosos y menos definidos.

Aquí hay una imagen para demostrar:

Como puede ver, la fuente se ve muy bien y se ve en el Retina Display iPod Touch, pero en el iMac es un poco horrible.

¿Qué está causando esto? ¿Esto tiene que ver con anti aliasing ? ¿Hay algo que pueda hacer al respecto?

Answer 1

-webkit-perspectiva: 1000;

Lo arregló para mi

Answer 2

Agregando a la respuesta de @ sporkbox, si está especialmente preocupado por los navegadores Webkit, existen las siguientes opciones de CSS que puede elegir usar:

font-smooth: auto | never | always | <absolute-size> | length | initial | inherit
-webkit-font-smoothing : none | subpixel-antialiased | antialiased

Answer 3

Algunas de las soluciones mencionadas antes de kinda / sorta hicieron el truco pero lo que me lo arregló fue eliminar (comentar) la herencia de tamaño de fuente de la clase "fa" dentro de font-awesome.css (y font-awesome.min.css) :

font-size: inherit;

El resultado final de la clase se ve así:

.fa {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  /* font-size: inherit; */
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
} 

Además de esto, tuve que ajustar los íconos grandes porque estaban siendo empujados demasiado abajo al comentar esta línea de la clase "fa-lg":

vertical-align:-15%

La clase se ve así.

.fa-lg {
  font-size: 1.33333333em;
  line-height: 0.75em;
  /* vertical-align: -15%; */
}

Estoy usando Font Awesome 4.7.0

Answer 4

Descubrí que algunos navegadores intentan emular una fuente de letra en negrita cuando no hay un peso en negrilla disponible haciendo que las líneas sean más gruesas, lo que resulta en algo parecido a la situación que estás describiendo. ¿Está seguro de que esto aparece en algún lugar donde tiene font-weight: normal; ?

Answer 5

Es probable que problemas como este estén relacionados con el suavizado o las insinuaciones. Las fuentes deben alinearse en una cuadrícula de algún tipo si esperan verse bien en tamaños más pequeños. Los chicos de GitHub escribieron una excelente publicación en el blog sobre cómo lograron la limpieza en su fuente personalizada.

Intentaría alinearlo en una cuadrícula y seguir los pasos de las personas de GitHub. Hicieron un buen trabajo en sus iconos.

Además: ¿los iconos tienen tamaños numéricos diferentes entre el iPod Touch y el iMac, o es un efecto secundario de diferentes configuraciones de DPI? Eso también puede ser una preocupación con la representación de la fuente.

Si es posible, juega con tu configuración de DPI. No uso Mac, así que no sé cómo cambiar esa configuración en uno. Sin embargo, todavía no solucionará el problema de la cuadrícula subyacente. ¿Eres capaz de editar la fuente (s) en cuestión?

Answer 6

Hay un truco extraño que funciona alguna vez, intente:

-webkit-transform:rotateZ(0);
-moz-transform:rotateZ(0);
-o-transform:rotateZ(0);
transform:rotateZ(0);

si tiene un bloque centrado, intente verificar si el desplazamiento izquierdo es un entero. Puedes usar Javascript para comprobarlo y arreglarlo. Puedo ayudarte si quieres.

Answer 7

La mejor solución para varios navegadores es:

.your_font_class{
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

Answer 8

Utilice el suavizado de fuentes css:

-webkit-font-smoothing: antialiased;