¿Cómo puedo reducir el alias que se produce alrededor de la fuente web de mi icono personalizado cuando se escala?

Estoy tratando de crear mis propios íconos e incrustarlos en una fuente web personalizada. Para eso, estoy usando Illustrator e Icomoon.

Diseño los íconos en un 14x14pxcuadrado, luego creo mi fuente web usando Icomoon y cuando veo el resultado en Chrome se ve perfecto en píxeles pero solo en font-size: 14px;.

Si escalo el font-sizea 16pxo 23pxcualquier número que no sea un múltiplo de 14px, entonces los íconos no se ven nítidos:

En 14px, los íconos se ven nítidos:

íconos a 14px, se ven nítidos

En 18px, podría ser mejor...

iconos a 18px

Sé que esto es algo esperado, pero me di cuenta de que los íconos como FontAwsome o Glyphicons se escalan mucho mejor que mi fuente personalizada.

Notas (en Illustrator):

  • Estoy usando la "Cuadrícula"
  • Estoy usando la configuración "Ajustar a píxel"
  • Estoy usando la configuración "Vista previa de píxeles".

Entonces, me preguntaba si me faltaba alguna configuración en Illustrator al guardar el ícono como SVG.

¿O si me falta algo en Icomoon, o tal vez debería usar otro programa?

¿Cómo puedo hacer que mi fuente web personalizada pueda escalar mejor cuando no escala exactamente proporcional a su tamaño de origen?

Puede haber algunos trucos específicos de fuentes (¿algo relacionado con insinuaciones, tal vez?) pero, en su defecto, ¿podría funcionar mejor si los obtiene con píxeles perfectos a 16px? 16 es mucho más divisible que 14 y cualquier aumento de píxel completo se puede hacer en 1/2, 1/4, 1/8, etc., lo que podría ser más limpio que las fracciones impares de 14
Sí, tu punto sobre 16pxvs 14pxtiene mucho sentido. Pero todavía me pregunto por qué FontAwesome (píxel perfecto/diseñado a 14 px) escala bien...?
solo una corazonada, pero parece que la fuente web sugiere 14px pero no otros tamaños. ¿Puedes cambiar los tamaños de las sugerencias al crear las fuentes?

Respuestas (2)

Tengo entendido que se trata de Font Hinting . Cuando se diseña una fuente, debe tener reglas específicas para verse bien en diferentes tamaños. La mayoría de las fuentes de iconos no tienen esta sugerencia para muchos tamaños y, por lo tanto, tendrán errores de "redondeo" que le darán líneas de medio píxel. Esto hace que el ícono sea borroso. Con las sugerencias correctas, los iconos se 'ajustan' a los píxeles.

En tamaños más grandes no suele haber problema. En mi humilde opinión, no hay nada que puedas hacer.

En respuesta a la corrección de Chrome: Chrome usa la interfaz de dispositivo gráfico de Windows (?) ahora para las fuentes, por lo que se ve igual que en IE.

¿ Tal vez debería buscar una aplicación de fuente oficial para crear fuentes como Fontographer ? De esa forma puedes controlar las insinuaciones.

si está utilizando Windows y Chrome, entonces hay una ligera diferencia en la representación de fuentes (en comparación con los sistemas basados ​​en OSX y Linux). No estoy completamente seguro de que esto lo ayude, pero consulte el siguiente enlace (el código obliga a los navegadores webkit a usar fuentes SVG).

¡FIJADO! Representación cromada de cara de fuente

¿Cómo puedo reducir el alias que se produce alrededor de la fuente web de mi icono personalizado cuando se escala?
RespuestasAquíPolítica de privacidad1y, 1v