GoogleWebFonts FontFamilyPreviewImages

Google Web Fontes - Fonte Family Preview Images

Este repo contém imagens que são representações de todas as diferentes fontes do Google. Precisávamos disso para o nosso estêncil de aplicativos, pois permitimos que nossos usuários pesquisem através do Google Fontes (através da API). Mas nós (obviamente) procuramos/precisamos para fornecer a eles uma prévia de como era a fonte.

Poderíamos ter carregado as fontes na memória e depois mostrou -as, mas isso não parecia ideal.

Observação

Se você estiver interessado em uma versão hospedada da captura de tela que vê abaixo (permitindo que seus usuários acionem um modal e clique com um botão borbulhando um evento que contém o URL do arquivo woff2 correspondente), entre em contato: [email protected]

Captura de tela de como nosso aplicativo usa as imagens neste repositório:

Por que existem tantos arquivos?

Enquanto o Google Fontes atualmente fornece milhares de variações de fonte diferentes, existem muitas imagens reais mais. Isso ocorre porque o Google Fontes atualiza rotineiramente as fontes de uma versão para outra (por exemplo, V5 a V6). Em seguida, renderizamos as imagens para garantir que a visualização que mostramos aos nossos usuários seja precisa.

Decidi deixar esses arquivos no repositório por causa da posteridade: você nunca sabe o que as pessoas precisarão :)

Tamanhos

No momento, estou fornecendo apenas imagens de visualização com um valor font-size de 48px . A largura respeita a largura nativa da fonte. Para garantir uma tela nítida, eu sugiro que você code o polegar de visualização a uma altura máxima de 24px .

Convenção de nomeação de arquivos:

Dois exemplos: ABeeZee-400.v10.png e Cabin-400italic.v10.png
O formato é bastante direto:

• O nome da fonte (não-hifens, caracteres não alfabéticos e não numéricos são removidos)
• Um traço ( - )
• O peso da fonte
• Se a fonte for uma versão em itálico, após a fonte, a palavra italic é adicionada
• O número da versão, precedido pela letra v

A expressão regular que eu uso para retirar os caracteres de nome é: /[^A-Za-z0-9-]/