Fontimize

Fontimize

Otimize facilmente as fontes (subconjuntos) apenas para os glifos específicos necessários para o seu texto ou html!

Você está preocupado com o tamanho do download inicial do seu site? Exigindo megabytes de downloads e você otimizou e minificou seu CSS, JavaScript e imagens, mas viu algumas fontes grandes? Fontimize é para você! Essa ferramenta analisa seus arquivos HTML e CSS (ou qualquer texto) e cria subconjuntos de fontes , arquivos de fonte que contêm apenas os caracteres ou glifos que são realmente usados.

Na prática, você pode reduzir o tamanho da fonte para 10% ou menos do original.

O Fontimize usa o TTF2WEB, e muito obrigado e crédito ao autor dessa biblioteca fantástica.

Exemplo de resultados

Esta biblioteca foi criada originalmente para o meu site pessoal. Utilizou quatro fontes TTF, totalizando pouco mais de 1,5 MB. (Isso não é incomum: um para títulos, um para o texto normal com uma variante para itálico, além de um quarto para uma peculiaridade tipográfica, Dropcaps.)

Após a execução do Fontimize, o tamanho total para todas as fontes combinado é de 76kb.

1,5 MB até 76kb é uma economia de 95,2%! Isso teve um impacto notável no horário inicial para baixar uma página no site, além de imenso impacto na renderização: antes, a carga inicial do site renderizava com fontes com serifa genéricas e depois renderizava alguns segundos depois, uma vez que as fontes baixaram, o que parecia muito ruim. Agora, você receberá as novas fontes imediatamente ou antes de perceber e o site parecerá correto desde o início.

Uso

O Fontimize é uma biblioteca Python e pode ser incluído no seu software Python ou usado independentemente na linha de comando.

Biblioteca

Comece instalando e importando o Fontimize:

 $ python3 -m pip install fontimize

Em seu script:

 import fontimize

Para analisar um conjunto de arquivos HTML no disco e os arquivos CSS que eles usam e exportar novas fontes (por padrão na mesma pasta que as fontes originais) contendo apenas os glifos usados no HTML:

 all_html_files = [ 'input/one.html' , 'input/two.html' ]

font_results = fontimize . optimise_fonts_for_files ( all_html_files )

print ( font_results [ "css" ])
# Prints CSS files found used by any of the HTML input files:
#  { 'input/main.css',
#    'input/secondary.css' }

print ( font_results [ "fonts" ])
# Prints pairs mapping the old fonts to the new optimised font generated for each. Use this to, eg, rewrite your CSS
# By default exports to the same folder as the input files; use `font_output_dir` to change
#  { 'input/fonts/Arial.ttf': 'input/fonts/Arial.FontimizeSubset.woff2',
#    'input/fonts/EB Garamond.ttf': 'input/fonts/EB Garamond.FontimizeSubset.woff2' }

print ( font_results [ "chars" ]
# Prints the set of characters that were found or synthesised that the output fonts will use
#   { ',', 'u', '.', '@', 'n', 'a', '_', 'l', 'i', 'h', 'Q', 'y', 'w', 'T', 'q', 'j', ' ', 'p', 'm', 's', 'o', 't', 'c' ... }

print ( font_results [ "uranges" ]
# Prints the same set of characters, formatted as ranges of Unicode characters
#   U+0020, U+002C, U+002E, U+0040, U+0051, U+0054, U+005F, U+0061-007A ...

Referência completa

optimise_fonts_for_files()

Este é provavelmente o método que você deseja usar.

Otimiza / subconjuntos de fontes com base em um conjunto de arquivos de entrada no disco e (automaticamente) os arquivos CSS externos que qualquer referência de arquivos HTML. Os arquivos são analisados como HTML se tiverem uma extensão de arquivo .htm ou .html (o texto visível ao usuário é extraído e o CSS é analisado), caso contrário, os arquivos são tratados como texto. Retorna a lista de arquivos CSS encontrados e um mapa dos novos arquivos de fonte antiga e otimizados.

Parâmetros:

• html_files : list[str] : lista de caminhos, cada um dos quais é um arquivo html. Cada um será analisado.
• font_output_dir = "" : caminho para onde as fontes subconjuntos devem ser colocadas. Por padrão, isso está vazio ( "" ), o que significa gerar as novas fontes no mesmo local que as fontes de entrada. Como as novas fontes têm um nome diferente (consulte subsetname , o próximo parâmetro), você não substituirá as fontes de entrada. Não há verificação se já existirem fontes de subconjuntos antes de serem escritas.
• subsetname = "FontimizeSubset" : as fontes otimizadas são renomeadas no formato OriginalName.FontimizeSubset.woff2 . É importante diferenciar as fontes subconjuntos das fontes originais com todos os glifos. Você pode alterar o nome do subconjunto de saída para qualquer outra string válida no seu sistema de arquivos.
• verbose : bool = False : se True , emite informações de diagnóstico sobre os arquivos CSS, fontes, etc. que são encontrados e estão gerando.
• print_stats : bool = True : imprime as informações para o tamanho total no disco das fontes de entrada e o tamanho total das fontes otimizadas e a economia em porcentagem. Defina isso como False se você quiser que ele funcione silenciosamente.
• fonts : list[str] = [] : uma lista de caminhos para arquivos de fontes. Estes são adicionados a quaisquer fontes que o método encontre via CSS. Você geralmente especificaria isso se estiver passando em arquivos de texto em vez de html
• addtl_text : str = "" : caracteres adicionais que devem ser adicionados aos encontrados nos arquivos

Retornos:

• dict[str, typing.Any]
• return_value["css"] -> lista de arquivos CSS exclusivos que os arquivos HTML usam
• return_value["fonts"] -> um dict em que keys() são os arquivos de fontes originais, e o valor para cada tecla é o arquivo de fonte de substituição que foi gerado. Você pode usar isso para atualizar as referências aos arquivos de fonte original. Observe que o Fontimizer não reescreve o CSS de entrada.
• return_value["chars"] -> um set de caracteres encontrados ao analisar a entrada
• return_value["uranges] -> As faixas unicode para os mesmos caracteres:" U+1000-2000, U+2500-2501 ", etc. Observe o segundo número em cada par não possui o" u+"-isso corresponde ao formato de entrada necessário para a fontim da biblioteca de fontes usos

optimise_fonts_for_html_contents()

Semelhante a optimise_fonts_for_html_files , exceto que a entrada é html como uma string (por exemplo <head>...</head><body>...<body> ). Não é analisado para encontrar os arquivos CSS usados (e, portanto, as fontes usadas), portanto, você também precisa fornecer uma lista de arquivos de fonte para otimizar.

Parâmetros:

• html_contents : list[str] : Lista de Strings HTML. O texto será extraído e usado para gerar a lista de glifos para as fontes otimizadas.
• fonts : list[str] : Lista de caminhos no sistema de arquivos local para fontes para otimizar. Estes podem ser caminhos relativos.

Outros parâmetros ( fontpath , subsetname , verbose , print_stats ) são idênticos a optimise_fonts_for_html_files .

Retornos:

• Um dict em que keys() são os arquivos de fonte original, e o valor para cada chave é o arquivo de fonte de substituição que foi gerado

optimise_fonts_for_multiple_text()

Semelhante a optimise_fonts_for_html_contents , exceto que a entrada é uma lista de strings python. O conteúdo dessas cordas é usado para gerar os glifos para as fontes otimizadas: haverá um glifo para cada caractere exclusivo nas seqüências de entrada (se as fontes de entrada contiverem os glifos necessários.))

Passe em uma lista de arquivos de fontes (parâmetro fonts ) como os arquivos de font de entrada para otimizar com base no texto.

Parâmetros:

• texts : list[str] : Lista de Strings Python. As fontes geradas conterão os glifos que essas strings usam.

Outros parâmetros ( fonts , fontpath , subsetname , verbose , print_stats ) e o valor de retorno são identiais para optimise_fonts_for_html_contents .

optimise_fonts()

Este é o principal método; Todos os métodos acima acabam aqui. É necessário uma sequência de texto Python Unicode e uma lista de caminhos para os arquivos de fontes para otimizar e cria subconjuntos de fontes que contêm apenas os glifos exclusivos necessários para o texto de entrada.

Parâmetros:

• text: str : Uma string python Unicode. Um conjunto de caracteres unicode exclusivo é gerado a partir disso, e os arquivos de fontes de saída conterão todos os glifos necessários para renderizar essa string corretamente (assumindo que as fontes continham os glifos para começar.)

Outros parâmetros ( fonts , fontpath , subsetname , verbose , print_stats ) e o valor de retorno são idênticos a optimise_fonts_for_html_contents e optimise_fonts_for_multiple_text .

Linha de comando

A ferramenta CommandLine pode ser usada independente ou integrada em um pipeline de geração de conteúdo.

Uso simples:

python3 fontimize.py file_a.html file_b.html

Isso analisa o HTML, além de quaisquer arquivos CSS externos referenciados, para encontrar glifos e fontes usadas. Ele gera novos arquivos de fonte no mesmo local que os arquivos de fonte de entrada.

python3 fontimize.py --text "The fonts will contain only the glyphs in this string" --fonts "Arial.tff" "Times New Roman.ttf"

Isso gera apenas os glifos necessários para a sequência especificada e cria novas versões do formato Arial e Times New Roman no Woff2 no mesmo local que os arquivos de fonte de entrada.

Referência

Entrada

• Geralmente, passe arquivos de entrada. O HTML será analisado para CSS e fontes referenciadas; Todos os outros arquivos serão analisados como texto.
• --text "string here" ( -t ): os glifos usados para renderizar essa string serão adicionados aos glifos encontrados nos arquivos de entrada, se houver, são especificados. Você deve passar os arquivos de entrada ou o texto (ou ambos), caso contrário, será apresentado um erro.
• --fonts "a.ttf" "b.ttf" ( -f ): Lista opcional de fontes de entrada. Estes serão adicionados a qualquer encontrado referenciado através de HTML/CSS.

Saída

• --outputdir folder_here ( -o ): diretório para colocar os arquivos de fonte gerados. Isso já deve existir.
• --subsetname MySubset ( -s ): frase usada nos nomes de arquivos de fontes gerados. É importante diferenciar as fontes de saída das fontes de entrada, porque (por definição como um subconjunto) elas são incompletas.

Outro

• --verbose ( -v ): saídas de informações detalhadas à medida que processa
• --nostats ( -n ): não imprime informações sobre resultados otimizados no final

Testes

Os testes de unidade são executados via tests.py e usam os arquivos nos tests . Observe que isso gera novos arquivos de saída na pasta testsoutput .

A pasta tests contém várias fontes licenciadas sob a licença de fonte SIL Open.

Notas

Eu uso o Fontimize como parte de um gerador de site estático personalizado para criar meu site. Ele opera como a etapa final, otimizando fontes com base nos arquivos HTML gerados armazenados no disco. Os valores de retorno da Fontimize - como as fontes que ele criou e os arquivos CSS que analisou - são usados para reescrever o CSS e apontar para as fontes recém -otimizadas.

(Reescrever o CSS não é atualmente um recurso fornecido pela Fontimize; crie um problema ou puxe a solicitação, se desejar que seja. Atualmente, a biblioteca gera novos arquivos de font e retorna um mapeamento (como um dicionário ou a saída de textos) que os arquivos de font antigos e os arquivos de fontos são os que são de forma que os arquivos de fontos, no entanto, o fontim não modificam os arquivos de CS existentes, no entanto, o que é o que é o que é o que é o que é o que é o que é o que é o que é o que é o que é o que é o que é o que é o que é o que é o que é um dos arquivos de fontos e os arquivos de fontos e os arquivos de fontos, no entanto, o que é o que é o que é o que é um dos arquivos de fontos, o que é o que é um dos arquivos de fontos e os arquivos de fontos e os arquivos de fontos, no entanto, o fontim. Você precisará fazer isso explicitamente.

• Por padrão, as novas fontes subconjuntos serão nomeadas com o sufixo "FontimizerSubset", por exemplo, Arial.FontimizerSubset.woff2 . Você pode personalizar o nome da fonte do subconjunto usando o parâmetro do método subsetname ou o parâmetro --subsetname=Foo -line. Embora seja recomendável usar um nome de subconjunto para evitar confundir a fonte otimizada com a fonte original (que contém todos os glifos), você pode usar qualquer nome preferir. O nome padrão "FontimizerSubset" é simplesmente uma sugestão de apontar os outros de volta a esta biblioteca, caso eles o encontrem. Não é necessário manter esse nome e você é livre para usar uma frase diferente.

• CSS Pseudo-Elementos:
  Fontimize as passas CSs para as fontes que são explicitamente usadas e para qualquer glifos exibidos na tela. Isso inclui glifos nos pseudo-elementos CSS como :before e :after . Se o texto ou os caracteres forem definidos nesses pseudo-elementos, eles serão incluídos nas fontes subconjuntos.

• CSS em linha:
  O Fontimize atualmente não analisa CSS embutido em arquivos HTML. Ele assume que o CSS externo está sendo usado, que encontra através das tags <link> na seção <head> do documento HTML. A Fontimize analisará esses arquivos CSS para fontes e glifos. Se a análise de CSS embutida seria útil, por favor levante um problema.

• Personagens adicionais:
  Quando citações simples ou duplas são encontradas no texto de entrada, a fonte subestimada também incluirá as cotações correspondentes à esquerda e à direita. Da mesma forma, se um traço for encontrado, o subconjunto incluirá tanto o EN-Dashes quanto o EM-Dashes.

• É muito bom (mas não é necessário) que, se você usar o Fontimizer, vincular -se a https://fontimize.daveon.design/ ou este repo do github. Isso é para apontar outras pessoas para a ferramenta. Muito obrigado :)