google font splitter

Google-font-splitter

Uma ferramenta para baixar os arquivos de fonte on-line fornecidos pelo Google-font ao seu site local.

As fontes on-line fornecidas pelo Google-Font Use unicode-range para segmentação de pacotes de fontes, que pode melhorar efetivamente a velocidade de carregamento das fontes.

No entanto, devido à rede, ambiente e outros problemas, alguns projetos não podem fazer referência ao Google Fonts normalmente; portanto, essa ferramenta baixará o Google online especificado para localmente para facilitar o projeto para fazer referência diretamente localmente.

Instalar

Requisitos: node 12+

npm install -g google-font-splitter

Como usar

O uso desta ferramenta é dividido em duas etapas, obtendo links de fonte on -line e baixando arquivos de fonte.

Etapa 1: Obtenha links de fonte online

Abra o Google Fontes e pesquise para selecionar a fonte que você deseja baixar.

Role para baixo na página Detalhes da fonte para encontrar estilos e clique no botão Selecionar este estilo à direita da fonte que você deseja usar.

Encontre o link da fonte on -line abaixo do painel da família selecionado à direita e copie -o (apenas um link, sem necessidade de copiar a tag de link inteira da linha):

Etapa 2: Faça o download do arquivo de fontes

Encontre uma pasta vazia e execute o seguinte comando:

google-font-splitter " https://你复制出的在线字体链接"
# 例如 google-font-splitter "https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@100;300;400&display=swap"

Após a entrada, a ferramenta imprimirá a seguinte saída:

 downloading entry css file...
recast entry file and generating font download tasks...
save entry css file...
downloading font source ======================================== 100% 291/291
download complate, save to D:projectgoogle-font-splitterfont-resultnoto-sans-sc

Em seguida, você pode encontrar a pasta de fontes baixada na pasta na última linha do log, o diretório é o seguinte:

 noto-sans-sc
├── s/notosanssc/xxx/...
└── noto-sans-sc.css

Contém uma pasta que armazena arquivos de fonte dividida e um arquivo CSS com o mesmo nome do diretório. Este arquivo CSS é o arquivo de entrada. Basta copiar a pasta para o seu projeto e fazer referência a ele usando a tag <link />.

Parâmetros da linha de comando e itens de configuração

Você pode usar o parâmetro --help para visualizar as informações de ajuda a qualquer momento.

• url do parâmetro

  A ferramenta aceita apenas um parâmetro, ou seja, o link de fonte on -line do Google Fontes, verifique se o link aponta para um arquivo CSS.

• Item de configuração -r, --root <path>

  O arquivo CSS de entrada de fontes apresenta o prefixo do caminho do arquivo de origem da fonte, que indica o caminho relativo do mesmo nível ( portanto, por padrão, você precisa colocar os arquivos de origem CSS e fontes no diretório de nível mesmo ).

  Você pode usar este parâmetro para especificar o local de armazenamento do arquivo de origem da fonte. Por exemplo, armazenar fontes em uma rede CDN separada:

   google-font-splitter "https://fonts.googleapis.com/..." -r https://your-custom-cdn/public/fonts/
  

• Item de configuração -d, --dist <savePath>

  O local padrão em que o arquivo de fonte deve ser baixado é ./font-result .

• Item de configuração -n, --name <fileName>

  O nome do arquivo de entrada da fonte, ou seja, o nome da pasta no diretório de download e o nome do arquivo CSS de entrada dentro dele.

  Por padrão, ele será analisado no link do Google Fonts fornecido, e o registro de data e hora atual de milissegundos será usado quando a resolução falhar.

• Item de configuração -c, --concurrent <number>

  O número de simultaneidade ao baixar arquivos de origem da fonte dividida, padrão para 30.

Citando em um projeto

A maneira de usar é muito simples, você só precisa usar <link href="xxx.css" rel="stylesheet"> para apresentar o arquivo de entrada da fonte baixado.

Aqui estão algumas referências de estrutura comuns (assumindo que os arquivos de fontes baixados sejam armazenados na pasta Noto-Sans-SC, e o arquivo de entrada é noto-sans-sc/noto-sans-sc.css ):

Vue2 (Vue-cli)

Copie a pasta de fontes baixada em /public do projeto VUE2.

Consulte o arquivo de entrada da fonte em /public/index.html :

 < link href =" <%= BASE_URL %>noto-sans-sc/noto-sans-sc.css " rel =" stylesheet " >

Em seguida, defina a família de fontes onde você precisa:

 # app {
  font-family : 'Noto Sans SC' , sans-serif;
}

Vue3 (Vite)

Copie a pasta de fontes baixada em /public do projeto Vite.

Consulte o arquivo de entrada da fonte em /index.html :

 <!-- 注意 vite 项目直接从根目录引用 public 中的文件即可 -->
< link href =" /noto-sans-sc/noto-sans-sc.css " rel =" stylesheet " >

Finalmente, defina a família de fontes quando necessário.

React (create-react-app)

Primeiro, copie a pasta de fontes baixada em /public do projeto React.

Em seguida, consulte o arquivo de entrada da fonte em /public/index.html :

 < link href =" %PUBLIC_URL%/noto-sans-sc/noto-sans-sc.css " rel =" stylesheet " >

Finalmente, defina a família de fontes quando necessário.

licença

Consulte a licença do Google-Fonts para obter detalhes.

consulte

Esta ferramenta usa o seguinte desenvolvimento de dependência: FS-extra-giz-Fetch-Fetch CSS-Tree.