font template
1.0.0
Las plantillas de fuentes de Adobe Illustrator que le permiten editar formas de glifos (caracteres) por completo en un archivo .ai (o en sus archivos .ai separados .ttf respectivos si lo desea), luego exportarlas como archivos .svg , que se pueden importar a un archivo de fuentes en Free-Font Font Fontforge, y generar archivos .woff2 producción finales ( .otf , .woff ,.
Hermosa versión de este tutorial en mi sitio web
font_template.ai (Descargar): plantilla de fuentes de Adobe Illustrator para símbolos básicos y extendidos y letras latinas (cobertura significativa de CP1252), cada glifo tiene una tabla de arte separada, de modo que pueda exportar fácilmente cada una de ellas como un archivo SVG de glifo individual.font_template_single.ai (descargar): plantilla de fuentes de Adobe Illustrator para un solo glifo. Si lo desea, puede usar este archivo en lugar de (o junto con) font_template.ai .batch_import_svg.py (abra, luego ctrl + s / cmd + s para guardar): un script de python que puede importar múltiples archivos de glifo individual SVG en el archivo de fuentes .sfd de Fontforge (y puede convertirlo opcionalmente en archivos de fuentes de producción, .woff decir .otf , .ttf , .woff2 ,. (En lugar de descargar los archivos, también puede git clone https://github.com/tomchen/font-template.git o descargar todo el repositorio)
( Asegúrese de usar la última versión de FontForge, que es la edición del 20 aniversario (2020-11-07) (página de lanzamiento de GitHub o página de descarga de FontForge.org). Old Windows versión 20200314 se bloquea al importar archivos SVG).
Abra font_template.ai , dibuje sus glifos en la capa "Glifo de obras de arte".
(No importa si su glifo está parcial y ligeramente fuera de su tablero de arte).
Después de terminar de dibujar los glifos, oculte la capa de "Glifo de ejemplo". Haga clic en "Archivo" -> "Exportar" -> "Exportar para pantallas".
Seleccione los glifos que desea exportar (no seleccione los vacíos), seleccione el formato "SVG", haga clic en "Exportar Artboard".
Los archivos SVG de glifos individuales exportados están dentro de una carpeta "SVG", colóquela en una carpeta que también contiene el archivo de script batch_import_svg.py .
Para los usuarios de Windows, ejecute C:Program Files (x86)FontForgeBuildsfontforge-console.bat ,* navegue a la carpeta usando cd <FOLDER_PATH> y ejecute el script Python usando ffpython batch_import_svg.py . Se generará un archivo de fuente de output.sfd .
Para usuarios de Mac o Linux, cd <FOLDER_PATH> y ejecute fontforge -lang=py -script batch_import_svg.py .
(*: para Windows de 64 bits son Program Files (x86) , para Windows de 32 bits, son Program Files )
Abra el archivo de fuentes output.sfd con FontForge. Ajuste el ancho de los glifos (use la tecla Shift para seleccionar todos los glifos que desea ajustar el ancho, luego, en el menú, seleccione "Métricas" -> "Ancho automático", o haga doble clic en un glifo y arrastre manualmente su línea de borde).
En el menú, seleccione "Archivo" -> "Generar fuentes ..."
Escriba un nombre de fuente, seleccione un formato de fuente (típicamente TrueType u OpenType), haga clic en el botón "Generar". ¡Entonces tienes tu fuente de computadora hecha a sí misma!
Puede detenerse aquí y no necesita leer las siguientes secciones.
Esta plantilla de fuente se puede usar para dibujar glifo único y producir SVG de glifo único.
La siguiente imagen representa las guías de un solo glifo.
En FontForge, seleccione un glifo o abra un glifo, luego haga clic en "Archivo" -> "Importar ...", seleccione "SVG" como "Formato", seleccione su archivo SVG único Glyph e importe.
Modifique el archivo batch_import_svg.py si desea abrir un archivo de fuente .sfd existente, o generar .otf , .ttf , .woff , .woff2 directamente, en lugar de hacerlo con FontForge GUI.
En el menú FontForge, haga clic en "Archivo" -> "Ejecutar script"
Copiar y pegar: SelectWorthOutputting(); foreach Export("%e_%n.svg"); endloop;
Seleccione el botón radial "FF".
Haga clic en el botón "Aceptar".
Si la forma de un glifo contiene múltiples rutas superpuestas, sería mejor unirse a ellos (un buen tutorial de YouTube) en lugar de agruparlas o hacerlas un camino compuesto. Este paso ayuda a evitar problemas de representación de fuentes para las rutas superpuestas. Sin embargo, para las rutas separadas (no superpuestas), siéntase libre de usar "grupo" ( Ctrl + g ) o "ruta compuesta" ("objeto" -> "ruta compuesta" -> "hacer").
En lugar de crear un archivo de fuentes con FontForge de Scrach, a veces es una buena idea usar un archivo de fuentes gratuito y de código abierto existente como una fuente base y alternativa. Las fuentes típicas de código abierto con buena cobertura del glifo son Adobe's Source Sans Pro y Source Serif Pro. Elija un peso como "regular", dependiendo de sus necesidades. Abra el archivo de fuentes con FontForge, edítelo para crear su fuente. Sin embargo, si usa una fuente existente, es posible que deba editar no solo AZ, AZ sino también sus ligaduras como "FF" y "FI".
Cuando selecciona glifos en la ventana "Exportar para pantallas" de Illustrator, no debe seleccionar glifos vacíos, de lo contrario, verá "Lo siento, este archivo es demasiado complejo para que yo entienda (o sea erróneo)" Advertencia cuando ejecute script batch_import_svg.py . Sin embargo, no se detendrá y continuará generando el archivo output.sfd .
El 19 de agosto de 2020, se actualizó el archivo font_template.ai del proyecto (se cambiaron muchos nombres de armar, por ejemplo, 44 , se cambiaron a 44 comma ) para solucionar un problema de nombre de archivo Unicode. Si ha descargado font_template.ai antes de 2020-08-19 e hizo su archivo .ai basado en la versión anterior, puede opcionalmente ** actualizar los nombres de la tabla de arte en su font_template.ai utilizando cualquiera de los siguientes métodos:
.ai a la última font_template.ai/other_files/update_artboard_names.js en Illustrator: abra su archivo .ai en Adobe Illustrator, en el menú, haga clic en "Archivo" -> "Scripts" -> "Otro script ...", busque y seleccione el archivo update_artboard_names.js descargado, haga clic en "Abrir" " Después de la actualización, elimine y regenere sus archivos Glyph SVG en la carpeta SVG .
(**: Si está utilizando la versión anterior pero sus glifos están limitados a caracteres ASCII básicos, por lo tanto, no encontrará ningún problema relacionado con el nombre de archivo de unicode SVG, puede optar por no actualizar su archivo .ai )
Una vez que tenga su propia fuente, puede usarla en sus páginas web (incluidos sitios web, aplicaciones web, aplicaciones de escritorio de forma cruzada compilada por electrones, o incluso reaccionar la aplicación móvil nativa / nativa / nativa).
Su fuente puede ser fuente de alfabeto o fuente de icono monocromático. Si desea mostrar íconos de color, use SVG o PNG.
Coloque sus archivos de fuente .woff2 y .woff ( my_font.woff2 y my_font.woff en el ejemplo) en su carpeta CSS e inserte el siguiente código en su archivo CSS (admite IE9+)::
@font-face {
font-family : 'MyFont' ;
src : url ( 'my_font.woff2' ) format ( 'woff2' ) ,
url ( 'my_font.woff' ) format ( 'woff' );
} (Si no desea admitir ningún IE, puede eliminar el archivo .woff y usar solo .woff2 (el formato más pequeño y último)))))
Luego use su nombre font-family personalizado ('myFont' en el ejemplo):
. my-special-font {
font-family : 'MyFont' , sans-serif;
color : yellow;
font-size : 20 px ;
}HTML:
< span class =" my-special-font " > B </ span > Si se trata de una fuente de icono monocromático, la letra B en el código HTML se mostrará como el mapeo de iconos monocromáticos a la letra B. Aunque los desarrolladores web generalmente usan caracteres en el área de uso privado Unicode, como U+EEA0 y U+F2BB en lugar de letras latinas y otros personajes comunes de uso común sobre las preocupaciones de semántica / SEO / accesibilidad, nadie previa en las letras latin latinas. Para abordar esas preocupaciones, puede identificar semánticamente un icono de fuentes agregando role y atributos aria-label a su elemento HTML:
< span role =" img " aria-label =" A bag " class =" my-special-font " > B </ span > Licencia de MIT para todo en este repositorio
