google font splitter

google-font-spittter

Un outil pour télécharger les fichiers de police en ligne fournis par Google-Font sur votre site local.

Les polices en ligne fournies par Google-Font utilisent unicode-range pour la segmentation des forfaits de police, qui peut efficacement améliorer la vitesse de chargement des polices.

Cependant, en raison du réseau, de l'environnement et d'autres problèmes, certains projets ne peuvent pas référencer les polices Google normalement, donc cet outil téléchargera le Google en ligne spécifié pour faciliter le projet pour référencer directement localement.

Installer

Exigences: node 12+

npm install -g google-font-splitter

Comment utiliser

L'utilisation de cet outil est divisée en deux étapes, obtenant des liens de police en ligne et téléchargeant des fichiers de police.

Étape 1: Obtenez des liens de police en ligne

Ouvrez Google Fonts et recherchez pour sélectionner la police que vous souhaitez télécharger.

Faites défiler vers le bas sur la page Détails de la police pour trouver des styles et cliquez sur le bouton Sélectionnez ce style à droite de la police que vous souhaitez utiliser.

Trouvez le lien de police en ligne sous le panneau de famille sélectionné à droite et copiez-le (juste un lien, pas besoin de copier la balise entière de lien de ligne):

Étape 2: Téléchargez le fichier de police

Trouvez un dossier vide et exécutez la commande suivante:

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

Après Entrée, l'outil imprimera la sortie suivante:

 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

Ensuite, vous pouvez trouver le dossier de police téléchargé dans le dossier de la dernière ligne du journal, le répertoire est le suivant:

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

Contient un dossier qui stocke les fichiers de police divisés et un fichier CSS avec le même nom que le répertoire. Ce fichier CSS est le fichier d'entrée. Copiez simplement le dossier dans votre projet et référez-le à l'aide de la balise <link />.

Paramètres de ligne de commande et éléments de configuration

Vous pouvez utiliser le paramètre --help pour afficher les informations d'aide à tout moment.

• url du paramètre

  L'outil n'accepte qu'un seul paramètre, c'est-à-dire le lien de police en ligne des polices Google, assurez-vous que le lien pointe vers un fichier CSS.

• Élément de configuration -r, --root <path>

  Le fichier CSS d'entrée de police introduit le préfixe de chemin du fichier source de police, qui par défaut est le chemin relatif de même niveau de même niveau ( donc par défaut, vous devez placer les fichiers source CSS et FONT de l'entrée dans le répertoire de même niveau ).

  Vous pouvez utiliser ce paramètre pour spécifier l'emplacement de stockage du fichier source de police. Par exemple, stockez des polices sur un réseau CDN séparé:

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

• Élément de configuration -d, --dist <savePath>

  L'emplacement par défaut où le fichier de police doit être téléchargé est ./font-result .

• Élément de configuration -n, --name <fileName>

  Le nom du fichier d'entrée de police, c'est-à-dire le nom du dossier dans le répertoire de téléchargement et le nom du fichier CSS d'entrée à l'intérieur.

  Par défaut, il sera analysé à partir du lien Google Fonts fourni, et l'horodatage en millisecondes actuel sera utilisé lorsque la résolution échoue.

• Élément de configuration -c, --concurrent <number>

  Le nombre de concurrence lors du téléchargement des fichiers source de police divisée, par défaut, 30.

Citant dans un projet

La façon d'utiliser est très simple, il vous suffit d'utiliser <link href="xxx.css" rel="stylesheet"> pour introduire le fichier d'entrée de police téléchargé.

Voici quelques références de framework courantes (en supposant que les fichiers de police téléchargés sont stockés dans le dossier Noto-Sans-SC, et que le fichier d'entrée est noto-sans-sc/noto-sans-sc.css ):

Vue2 (Vue-Cli)

Copiez le dossier de police téléchargé dans /public du projet VUE2.

Reportez-vous au fichier d'entrée de police dans /public/index.html :

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

Réglez ensuite la famille de la police où vous en avez besoin:

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

Vue3 (Vite)

Copiez le dossier de police téléchargé dans /public du projet VITE.

Reportez-vous au fichier d'entrée de police dans /index.html :

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

Enfin, définissez la famille de police si nécessaire.

react (create-react-app)

Copiez d'abord le dossier de police téléchargé dans /public du projet React.

Reportez ensuite au fichier d'entrée de police dans /public/index.html :

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

Enfin, définissez la famille de police si nécessaire.

licence

Voir la licence Google-Fonts pour plus de détails.

se référer à

Cet outil utilise le développement de dépendances suivant: CSS-tree CSS-tree.