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

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

¿Este método significará en última instancia crear un conjunto de fuentes de un archivo que tenga cada icono asignado a un carácter? 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 diferentes iconos, exportando cada uno como es propio .archivo png para cada color y tamaño diferentes).

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

También, en lo que respecta a la implementación de esto en el sitio web. Entonces tendría que especificar el tipo de fuente dentro de la clase css / id (es decir, font=icons; ). Y luego podría cambiar el tamaño, el color, etc. con css así? Hombre, si esto realmente es verdadero. Ojalá me enterara antes... horas y horas podrían haberse ahorrado.

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

Author: jstacks, 2012-09-09
Source

2 answers

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

Preparación (usando Inkscape en este ejemplo)

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

A menudo dejaré este documento SVG plano abierto, pegando nuevos iconos y centrando y dimensionando de acuerdo con el último. De esta manera hay consistencia de tamaño y posición en todo el conjunto de iconos (y no tiene que seguir eligiendo el directorio para guardar su plano SVGs).

Creación de glifos (usando FontForge)

  1. Una vez que haya creado un archivo SVG para cada icono, abra FontForge y cree un nuevo documento 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 icono.
  3. En esta nueva ventana de glifo, elija Archivo > Importar y seleccione uno de sus archivos SVG (probablemente necesitará cambiar el filtro de archivo en el diálogo de archivo para mostrar archivos SVG).
  4. Si el la importación registra errores y el wireframe parece que sufrió una leve explosión, tendrá que volver a Inkscape para ordenar el camino. Hay una manera fácil de descubrir el problema que debería funcionar en la mayoría de los casos:
    • En Inkscape, elimine el relleno del icono.
    • Agregue un trazo fino (1px bastará).
    • Convierte el trazo en una ruta.
    • A la forma resultante probablemente le falte una parte de tu icono.
    • Deshacer todo, luego separar el icono y redibujar / rastrear / corregir el área del problema.

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. Cambie lo siguiente:

    • Nombre de la fuente : MyFontMedium
    • Apellido : Mi Fuente
    • Nombre para humanos : Mi Fuente Medio
    • Peso : Libro (Win XP piensa medio = negrita, así que es mejor usar Libro)

  3. En la ventana principal, elija Archivo > Generar fuentes y guarde 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 zip que descargue contendrá instrucciones precisas sobre cómo implementar las fuentes en su proyecto web.

Espero que eso sea de ayuda.

 52
Author: wayfarer_boy,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-11-29 21:45:42

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

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

Si nos fijamos en su código, se puede ver cómo ejecutar el CSS:

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

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

(Descargo de responsabilidad: No he hecho esta parte del proceso. En nuestro equipo uno de los chicos utiliza una aplicación patentada para Mac para llegar a la fuente. Si necesito hacer mis propias fuentes de iconos en el futuro probablemente usaré Inkscape y FontForge. 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 lo desee, debe convertir la fuente en los muchos formatos diferentes necesarios para usar como una fuente web. Utilizo esta herramienta gratuita en línea:

Http://fontface.codeandmore.com /

... que le dará sus archivos de fuentes EOT, SVG, TTF y WOFF, que deberían cubrirle para casi todos los navegadores. A continuación, debe incluir estos archivos en su CSS, como se muestra en el archivo vinculado anteriormente. Nota: para el archivo SVG, hay un ID que tendrá que actualizar. Creo que es elegido automáticamente por la herramienta de conversión, por lo que tendrás que editar el SVG, comprobar cuál 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;
}

Puede que tenga que cambiar el bit #myiconfont-regular después de la definición svg.

 7
Author: Jason O'Neil,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-10-11 02:48:13