iconos - svg font icon
Creación de un icono de navegador cruzado webfont (4)
He estado haciendo mi propia fuente de web tomando como punto de partida los artículos del diseñador de páginas web e intridea .
Sé que los diferentes motores renderizan las fuentes de manera diferente, pero el problema que tengo es que Firefox hace que la fuente sea más alta que Chrome; en el tamaño que muestro, la fuente es muy notable (3 o 4 px; lo que en un botón significa que '' totalmente desalineado).
También me he referido a la documentación del octicón de Github : ¡al ver cómo los octicones comparan el navegador se ven geniales! No hay diferencia notable por lo que puedo ver. ¿Cómo lograron esto?
Estoy usando inkscape y he probado un par de plantillas de inicio svg diferentes. La configuración es Set width: 1024 y he probado los íconos en varios tamaños sin resultados diferentes. es decir, 512 puntos cuadrados y alineados justo debajo de la línea de base.
Mi pregunta es ¿qué reglas debo implementar al crear una fuente web para obtener la menor diferencia entre la representación del navegador de la fuente?
Esta es una pregunta complicada que involucra algo llamado métricas verticales. Una fuente tiene tres conjuntos de estos. el primer conjunto, que se encuentra en la tabla ''hhea'', generalmente es específico de Mac. Los otros dos conjuntos, que se encuentran en la tabla ''OS / 2'' se relacionan con Windows (y Linux). La idea es igualar estos valores. Nuestro generador tiene una característica llamada ''Mediciones verticales fijas'' que, por extraño que parezca, hace una mejor suposición de esto. Tenga en cuenta que Github usó el generador para terminar sus iconos.
Sé que esto no se relaciona específicamente con las fuentes SVG, pero estoy bastante seguro de que aquí es donde se encuentran sus problemas. Tener diferentes valores de métricas verticales arruina las líneas de base en las plataformas.
Un poco de lectura:
Hay una aplicación web, icomoon: http://icomoon.io/app/
Hace el trabajo bastante bien, pero tienes que probar la representación de los diferentes iconos.
Ofrecen muchos íconos si no quieres diseñar todo.
Tuve el mismo problema y lo resolví configurando manualmente las métricas para los tres tipos.
Puede ver mi solución de trabajo con capturas de pantalla de la configuración aquí:
Utilicé la aplicación Icomoon para crear la fuente del icono Emoji , así como para crear fuentes de icono personalizadas por proyecto.
La aplicación Icomoon le permite hacer cada uno de los siguientes:
- Obtén uno o más iconos de varias fuentes de iconos populares
- Cargue otras fuentes, que pueden ser fuentes de iconos pero también fuentes regulares
- Sube archivos SVG para usar como iconos
- Combina cualquier número de iconos de cualquier número de fuentes disponibles
- Establezca el valor hexadecimal de UNICODE para los caracteres que necesite
- Exportar y / o guardar el conjunto de fuentes que creas
Para obtener más detalles, consulte Crear webfont con símbolos de planos multilingües suplementarios Unicode .