font template
1.0.0
ADOBE Illustrator Font Modelos que permitem editar formas de glifos (caracteres) completamente em um arquivo .ai (ou em seus respectivos arquivos .ai separados, se desejar), exportá-los como arquivos .svg , .woff2 podem ser importados para um arquivo de font em FONTs .otf .ttf .woff , e geram a produção final.
Linda versão deste tutorial no meu site
font_template.ai (Download): Modelo de fonte do Adobe Illustrator para símbolos básicos e estendidos e letras latinas (cobertura significativa de CP1252), cada glifo possui uma prancha de arte separada, para que você possa exportar facilmente cada um deles como arquivo glifo individual.font_template_single.ai (Download): Modelo de fonte do Adobe Illustrator para um único glifo. Se desejar, você pode usar este arquivo em vez de (ou junto com) font_template.ai .batch_import_svg.py (open, then Ctrl + S / Cmd + S to save): a python script that can import multiple SVG individual glyph files into FontForge's .sfd font file (and can optionally convert it to production font files, ie .otf , .ttf , .woff , .woff2 , etc.) (Em vez de baixar os arquivos, você também pode git clone https://github.com/tomchen/font-template.git ou baixar o repositório inteiro)
( Certifique-se de usar a versão mais recente do FontForge, que é o 20º aniversário da edição (2020-11-07) (página de lançamento do Github ou página de download do FontForge.org). Antiga Windows versão 20200314 trava ao importar arquivos SVG. )
Open font_template.ai , desenhe seus glifos na camada "obra de arte".
(Não importa se o seu glifo está parcial e ligeiramente fora de sua prancha de arte.)
Depois de terminar de desenhar os glifos, oculte a camada "Exemplo de glifo". Clique em "Arquivo" -> "Export" -> "Exportar para telas".
Selecione os glifos que deseja exportar (não selecione os vazios), selecione "SVG" Formato, clique em "Export Artboard".
Os arquivos individuais do Glyph SVG exportados estão dentro de uma pasta "SVG", coloque -os em uma pasta que também contém o arquivo de script batch_import_svg.py .
Para usuários do Windows, execute C:Program Files (x86)FontForgeBuildsfontforge-console.bat ,* navegue até a pasta usando cd <FOLDER_PATH> e execute o script python usando ffpython batch_import_svg.py . Um arquivo de fonte de output.sfd será gerado.
Para usuários de Mac ou Linux, cd <FOLDER_PATH> e Execute fontforge -lang=py -script batch_import_svg.py .
(*: Para o Windows de 64 bits, os Program Files (x86) , para o Windows de 32 bits, os Program Files )
Abra o arquivo de fonte de output.sfd com fontforge. Ajuste a largura dos glifos (use a tecla Shift para selecionar todos os glifos que deseja ajustar a largura e, no menu, selecione "Métricas" -> "Largura automática" ou clique duas vezes em um glifo e arraste manualmente sua linha de fronteira).
No menu, selecione "FILE" -> "Gere fontes ..."
Digite um nome de fonte, selecione um formato de fonte (normalmente TrueType ou OpenType), clique no botão "Gereate". Então você tem sua fonte de computador feita por conta própria!
Você pode parar por aqui e não precisa ler as seções a seguir.
Este modelo de fonte pode ser usado para desenhar um glifo único e produzir glifo único SVG.
A imagem a seguir mostra os guias de um único glifo.
Em FontForge, selecione um glifo ou abra um glifo e clique em "FILE" -> "Importar ...", selecione "SVG" como "Formato", selecione seu arquivo único Glyph SVG e importá -lo.
Modifique o arquivo batch_import_svg.py se você deseja abrir um arquivo de font .sfd existente ou gerar .otf , .ttf , .woff , .woff2 diretamente, em vez de fazê -lo com a GUI do FontForge.
No menu Fontforge, clique em "Arquivo" -> "Executar script"
Copiar e colar: SelectWorthOutputting(); foreach Export("%e_%n.svg"); endloop;
Selecione o botão radial "FF".
Clique no botão "OK".
Se a forma de um glifo contiver vários caminhos sobrepostos, seria melhor se juntar a eles (um bom tutorial do YouTube) em vez de agrupá -los ou torná -los um caminho composto. Esta etapa ajuda a evitar problemas de renderização de fontes para caminhos sobrepostos. No entanto, para caminhos separados (não sobrepostos), sinta -se à vontade para usar o "grupo" ( Ctrl + G ) ou "Caminho composto" ("Objeto" -> "Caminho do composto" -> "Make").
Em vez de criar um arquivo de fonte com o FontForge a partir do SCRACH, às vezes é uma boa ideia usar um arquivo de fonte gratuito e de código aberto existente como uma fonte de base e fallback. Fontes típicas de código aberto com boa cobertura de glifos são a fonte do Adobe Sans Pro e a Source Serif Pro. Escolha um peso como "regular", dependendo de suas necessidades. Abra o arquivo de fonte com o FontForge, edite -o para criar sua fonte. No entanto, se você usar uma fonte existente, pode ser necessário editar não apenas AZ, AZ, mas também suas ligaduras como "FF" e "FI".
Quando você seleciona glifos na janela "Exportar para telas" do Illustrator, você não deve selecionar glifos vazios; caso contrário, você verá "Sinto muito que esse arquivo seja muito complexo para eu entender (ou errar)" Aviso ao executar o script batch_import_svg.py . No entanto, ele não vai parar e continuará a gerar o arquivo output.sfd .
Em 19 de agosto de 2020, o arquivo font_template.ai do projeto foi atualizado (muitos nomes da prancha de arte foram alterados, por exemplo 44 , foi alterada para 44 comma ) para corrigir um problema de nome de arquivo Unicode. Se você baixou font_template.ai antes de 2020-08-19 e fez seu arquivo .ai com base na versão antiga, opcionalmente ** Atualizar os nomes da prancha de arte em seu font_template.ai usando um dos seguintes métodos:
.ai antigo para o mais recente font_template.ai/other_files/update_artboard_names.js no ilustrador: Abra seu arquivo .ai no Adobe Illustrator, no menu, clique em "Arquivo" -> "scripts" -> "Outro script ...", encontre e selecione o atualização update_artboard_names.js , clique em "Open" Após a atualização, exclua e regenere seus arquivos Glyph SVG na pasta SVG .
(**: Se você estiver usando a versão antiga, mas seus glifos estão limitados aos caracteres básicos do ASCII, portanto, não encontrará nenhum problema relacionado ao nome do arquivo SVG Unicode, você pode optar por não atualizar seu arquivo .ai )
Depois de ter sua própria fonte, você pode usá-la em suas páginas da web (incluindo sites, aplicativos da Web, aplicativos de desktop crossplateform compilados por elétrons ou até mesmo reagir aplicativo móvel nativo / nativo).
Sua fonte pode ser fonte de alfabeto ou fonte de ícone monocromático. Se você deseja mostrar ícones coloridos, use SVG ou PNG.
Coloque seus arquivos de fonte .woff2 e .woff ( my_font.woff2 e my_font.woff no exemplo) na pasta CSS e insira o código a seguir no seu arquivo css (ele suporta IE9+):
@font-face {
font-family : 'MyFont' ;
src : url ( 'my_font.woff2' ) format ( 'woff2' ) ,
url ( 'my_font.woff' ) format ( 'woff' );
} (Se você não quiser apoiar nenhum IE, pode excluir o arquivo .woff e usar apenas .woff2 (o menor e mais recente formato))
Em seguida, use seu nome personalizado font-family ('MyFont' no exemplo):
. my-special-font {
font-family : 'MyFont' , sans-serif;
color : yellow;
font-size : 20 px ;
}Html:
< span class =" my-special-font " > B </ span > Se for uma fonte de ícone monocromática, a letra B no código HTML será mostrada como o mapeamento de ícones monocromáticos para a letra B. Embora os desenvolvedores da Web geralmente usem caracteres na área de uso privado unicode, como U+EEA0 e U+F2BB em vez de letras latinas básicas e outros caracteres usados comuns em relação aos semantics / Seo / Accountiltibilies. Para abordar essas preocupações, você pode identificar semanticamente um ícone de fonte adicionando atributos de role e aria-label ao seu elemento HTML:
< span role =" img " aria-label =" A bag " class =" my-special-font " > B </ span > MIT Licença para tudo neste repositório
