webfont generator

Gerador de fonte da web

Uma fonte entra, todas as fontes da web saem.

O objetivo desta ferramenta é automatizar a geração de formatos de fonte amigáveis à Web e das regras CSS @font-face a partir de arquivos de fontes arbitrários, sem precisar confiar nos serviços da Web ou exigir uma conexão de rede. Essa ferramenta pode gerar URLs de dados embutidos, se necessário.

Consulte o artigo usando @font-face no css tricks.com para obter mais informações sobre como maximizar a compatibilidade de fontes incorporada.

Investir rápido

./setup # Fetch and build third-party libraries
./bin/generate-webfonts MyFont.ttf -o assets/ # Convert a font 

Uso

O script de driver é generate-webfonts . No mais básico, ele aceita um arquivo de fonte como seu argumento e cospe todas as fontes convertidas em um diretório. Também pode gerar CSS para a regra apropriada @font-face .

 ./bin/generate-webfonts -o assets MyFont.ttf --css MyFont.css

O comando acima, que usa os formatos de saída padrão, gera os seguintes arquivos:

• MyFont.css
• assets/MyFont.woff
• assets/MyFont.woff2
• assets/MyFont.ttf
• assets/MyFont.eot
• assets/MyFont.svg

O arquivo MyFont.css conterá o seguinte:

 @font-face {
  font-family : 'MyFont' ;
  src : url ( 'assets/MyFont.eot' );
  src : url ( 'assets/MyFont.eot?#iefix' ) format ( 'embedded-opentype' ) ,
       url ( 'assets/MyFont.woff2' ) format ( 'woff2' ) ,
       url ( 'assets/MyFont.woff' ) format ( 'woff' ) ,
       url ( 'assets/MyFont.ttf' ) format ( 'truetype' ) ,
       url ( 'assets/MyFont.svg#MyFont' ) format ( 'svg' );
}

Conceitualmente, dada uma lista de arquivos de entrada e uma lista de formatos de saída, o conversor tentará atender a todos os requisitos de formato de saída copiando arquivos de entrada correspondentes e convertendo arquivos para preencher as lacunas. Devido às limitações nos conversores de fontes subjacentes, alguns formatos intermediários não solicitados podem ser gerados.

O comando evitará gerar um arquivo em um determinado formato de saída se um arquivo correspondente a esse formato já estiver listado como uma das entradas. Nesse caso, o arquivo de entrada será simplesmente copiado para o diretório de destino (ou deixado sozinho, se já estiver no diretório de saída). Se esse arquivo não estiver listado nos argumentos, ele será substituído por um arquivo recém -convertido, mesmo que já exista no diretório de saída.

Veja as opções abaixo para um uso mais avançado.

Sintaxe

O script bin/generate-webfonts aceita uma lista de arquivos de font como entrada e várias opções:

-o --output

Diretório de destino para arquivos convertidos. Mesmo que apenas fontes embutidas sejam geradas, é necessário um diretório de destino para manter arquivos intermediários.

-f --format

Lista separada por vírgula dos formatos de saída. Os possíveis formatos são:

• ttf
• Woff
• woff2
• eot
• svg
• OTF

Qualquer formato com o sufixo :inline fará com que a fonte seja inlinada no arquivo CSS como um URL de dados codificado por Base64, em vez de um URL para um arquivo.

A lista de formatos padrão é eot,woff2,woff,ttf,svg .

-c --css

Caminho para o arquivo CSS gerado. Use - para stdout. Se omitido, nenhum CSS é gerado.

-p --prefix

Prefixo dos caminhos de fonte usados no CSS gerado. Por exemplo, se sua folha de estilo for servida no css/ e suas fontes forem servidas a partir de fonts/ , você deseja definir o prefixo para ../fonts/ . O prefixo padrão é o nome do diretório de saída.

--font-family

Nome da família de fontes usada no arquivo CSS. O padrão é o nome base do primeiro arquivo de entrada.

--verbose

Mostre a saída verbosa durante a execução.

-v --version

Versão de exibição.

Formatos suportados

generate-webfonts suporta os seguintes formatos de fonte:

• ttf
• Woff
• woff2
• eot
• svg
• OTF

Ele pode se converter para e de qualquer um dos formatos listados acima, com uma exceção: não pode converter o EOT em outros formatos.

Ferramentas de terceiros

O gerador aproveita três bibliotecas/ferramentas de terceiros para converter fontes. Como nenhuma ferramenta única suporta todos os formatos de fonte, o trabalho do gerador é descobrir uma boa cadeia de conversores a serem usados para converter entre dois formatos de fonte. Sob o capô, ele é realmente implementado como um problema de caminho mais curto em um gráfico de dependência.

As ferramentas de terceiros usadas são:

• FontForge, um programa de editor de fontes gratuito, de uso geral e scriptable
• Sfntly pelo Google, uma biblioteca Java de código aberto que uma vez alimentou o Google Fonts
• Conversor WOFF2 do Google

A FontForge suporta a leitura e a geração de um bom número de formatos de fonte, embora não tenha suporte para os formatos EOT ou WOFF2. A biblioteca incrivelmente rápida pode converter fontes TTF em EOT ou WOFF, cobrindo uma dessas lacunas. O conversor WOFF2 do Google também é usado para converter entre os formatos WOFF2 e TTF.

Configurar

Como mencionado acima, execute ./setup para baixar e construir as bibliotecas de terceiros. A execução ./setup verificará os repositórios do conversor SFNTLY e WOFF2 localmente, onde generate-webfonts pode encontrá-los. Instale o FontForge usando seu gerenciador de pacotes ou diretamente no site deles.

O processo de configuração assume um ambiente *nix. Atualmente, não há suporte para configurar esta ferramenta no Windows.

Os seguintes comandos são obrigados a executar o script de configuração:

• git
• java e javac
• mvn (Maven)

O script generate-webfonts requer Python 3.

Pensamentos finais

Por favor, converta com responsabilidade! Respeite os direitos autorais dos criadores de fontes.