fonts - una - ¿Crear fuentes de iconos con software vectorial(es decir, inkscape) y fontforge?

descargar gratis fontforge

Question

A través de obtener algunas respuestas aquí y algunas investigaciones, me he encontrado con un nuevo enfoque para implementar íconos. En lugar de imágenes o fondo de CSS, parece que puedes acercarte a los iconos como una fuente.

¿Este método en última instancia significará crear un conjunto de fuentes de un archivo que tenga asignado cada icono a un personaje? Debido a que este método es tan nuevo para mí, realmente quiero asegurarme de abordarlo correctamente primero (veo un gran potencial ... mucho mejor que crear iconos diferentes, exportar cada uno como su propio archivo .png para cada color y tamaño diferente).

Si ese es el caso, tomará un poco de memorización (especialmente porque tengo más de 26 iconos). Para aquellos con más experiencia con fontforge, ¿hay alguna manera de decir una palabra específica = personaje?

Además, en lo que respecta a la implementación de esto en el sitio web. Entonces necesitaría especificar el tipo de fuente dentro de la clase / ID css (es decir, font = íconos;). Y luego, ¿podría cambiar el tamaño, el color, etc. también con CSS? Hombre, si esto es verdad. Desearía haberme enterado antes ... horas y horas podrían haberse salvado.

De todos modos, cualquier ayuda con esto es muy apreciada. Estoy a punto de obtener fontforge y comenzar a aprender (si hay un mejor software gratuito para la creación de fuentes, hágamelo saber). Espero que esto funcione.

Answer 1

Aquí hay un ejemplo de código abierto de lo que estás buscando hacer:

http://fortawesome.github.com/Font-Awesome/

Si miras su código, puedes ver cómo ejecutar el CSS:

https://github.com/FortAwesome/Font-Awesome/blob/master/css/font-awesome.css

Y si desea editar las fuentes, descargue FontAwesome.ttf y edítelas en FontForge. Si quieres hacer tu propio TTF, podrías, pero solo echa un vistazo y copia cómo lo hicieron, supongo.

( Descargo de responsabilidad: no he hecho esta parte del proceso. En nuestro equipo, uno de los muchachos usa una aplicación patentada de Mac para crear la fuente. Si necesito usar mis propios íconos en el futuro, probablemente use Inkscape y FontForge, sin embargo, he comprobado lo suficiente para ver que FontForge puede importar SVG, aunque no lo he probado ).

Cuando haya terminado y tenga su fuente TTF como la quiera, necesita convertir la fuente en los muchos formatos diferentes necesarios para usar como fuente web. Yo uso esta herramienta gratuita en línea:

http://fontface.codeandmore.com/

... que le proporcionará los archivos de fuentes EOT, SVG, TTF y WOFF, que deberían cubrirlo en casi todos los navegadores. Luego debe incluir estos archivos en su CSS, como se demuestra en el archivo vinculado anteriormente. Nota: para el archivo SVG, hay una ID que deberá actualizar. Creo que la herramienta de conversión lo elige automáticamente, por lo que tendrá que editar el SVG, verificar qué es el ID e incluirlo.

Por ejemplo, en este código:

@font-face {
  font-family: ''MyIcons'';
  src: url(''myiconfont-iconglyphs.eot'');
  src: url(''myiconfont-iconglyphs.eot#iefix'') format(''embedded-opentype''),
       url(''myiconfont-iconglyphs.woff'') format(''woff''),
       url(''myiconfont-iconglyphs.ttf'')  format(''truetype''),
       url(''myiconfont-iconglyphs.svg#myiconfont-regular'') format(''svg'');
  font-weight: normal;
  font-style: normal;
}

Es posible que deba cambiar el #myiconfont-regular después de la definición de svg.

Answer 2

He creado con éxito algunas fuentes de iconos para mis sitios web y el enfoque de Inkscape FontForge tal como se describe en este instructivo es bastante sólido, y si está acostumbrado a usar software como Inkscape, también es bastante fácil. Estos son los pasos que tomo:

Preparación (utilizando Inkscape en este ejemplo)

1. Abra el documento de Inkscape que contiene sus diseños.
2. Asegúrate de haber convertido todas las formas, tipos y líneas a las rutas y verifica tu dibujo en modo de contorno para estar seguro. Si hay problemas, siempre puede consultar este archivo base para realizar cambios iniciales en las formas.
3. Cree un nuevo documento seleccionando Nuevo> fontforge_glyph .
4. Pegue un ícono de su diseño en el nuevo documento.
5. Cambie el tamaño del ícono para que se ajuste al espacio provisto (aunque lo mejor es que cambie el tamaño de todos los íconos en el documento de diseño original primero).
6. Centre el ícono en la página usando la herramienta Alinear (si corresponde).
7. Guarde el dibujo como SVG simple (es más fácil si titula de acuerdo con la letra que se asignará, por ejemplo, "j.svg" ).
8. Repita para otros iconos.

A menudo dejaré este documento SVG simple abierto, pegando nuevos iconos y centrando y dimensionando de acuerdo con el último. De esta forma, la consistencia del tamaño y la posición en todo el conjunto de iconos (y no tiene que seguir eligiendo el directorio para guardar sus archivos SVG normales).

Creación de glifo (usando FontForge)

1. Una vez que haya creado un archivo SVG para cada icono, abra FontForge y cree un nuevo documento de FontForge.
2. En la ventana principal de la lista de visualización de glifos, haga doble clic en una de las letras / números para los que tiene un ícono.
3. En esta nueva ventana de glifos, elija Archivo> Importar y seleccione uno de sus archivos SVG (probablemente necesite cambiar el filtro de archivos en el diálogo de archivos para mostrar los archivos SVG).
4. Si la importación registra errores y la estructura metálica parece que sufrió una explosión leve, deberá volver a Inkscape para ordenar la ruta. Hay una manera fácil de descubrir el problema que debería funcionar en la mayoría de los casos:
   • En Inkscape, elimina el relleno del ícono.
   • Agregue un trazo fino (1px lo hará).
   • Convierte el trazo a un camino.
   • La forma resultante probablemente perderá una parte de su icono.
   • Deshaga todo, luego divida el icono y vuelva a dibujar / trace / corrija el área problemática.

Creación de fuentes (usando FontForge)

1. De vuelta en FontForge, una vez que haya agregado todos sus iconos, debe darle un nombre a su tipo de letra. En la ventana principal, seleccione Elemento> Información de fuente .

2. Cambiar lo siguiente:

   • Nombre de fuente : MyFontMedium
   • Apellido : My Font
   • Nombre para humanos : My Font Medium
   • Peso : libro (Win XP piensa medio = negrita, así que es mejor usar el libro)

3. En la ventana principal, elija Archivo> Generar fuentes y guárdelo en TrueType (ignorando cualquier error).

Validación / conversión de fuentes

1. Vaya a www.fontsquirrel.com/fontface/generator o un servicio similar para cargar su archivo TTF y convertirlo (y corregirlo)
2. El archivo comprimido que descargue contendrá instrucciones precisas sobre cómo implementar las fuentes en su proyecto web.

Espero que sea de ayuda.