google font splitter

brote de Google-Font-brote

Una herramienta para descargar los archivos de fuentes en línea proporcionados por Google-Font a su sitio local.

Las fuentes en línea proporcionadas por Google-Font utilizan unicode-range para la segmentación del paquete de fuentes, que puede mejorar efectivamente la velocidad de carga de las fuentes.

Sin embargo, debido a la red, el entorno y otros problemas, algunos proyectos no pueden hacer referencia a Google Fonts normalmente, por lo que esta herramienta descargará el Google especificado en línea para facilitar el proyecto para hacer referencia directamente localmente.

Instalar

Requisitos: node 12+

npm install -g google-font-splitter

Cómo usar

El uso de esta herramienta se divide en dos pasos, obteniendo enlaces de fuentes en línea y descargando archivos de fuentes.

Paso 1: Obtenga enlaces de fuentes en línea

Abra Google Fonts y busque para seleccionar la fuente que desea descargar.

Desplácese hacia abajo en la página Detalles de la fuente para encontrar estilos y haga clic en el botón Seleccionar este estilo a la derecha de la fuente que desea usar.

Encuentre el enlace de fuente en línea debajo del panel familiar seleccionado a la derecha y copie (solo un enlace, no es necesario copiar la etiqueta de enlace de línea completa):

Paso 2: Descargue el archivo de fuentes

Encuentre una carpeta vacía y ejecute el siguiente comando:

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

Después de entrar, la herramienta imprimirá la siguiente salida:

 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

Luego puede encontrar la carpeta de fuente descargada en la carpeta en la última línea del registro, el directorio es el siguiente:

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

Contiene una carpeta que almacena archivos de fuentes divididos y un archivo CSS con el mismo nombre que el directorio. Este archivo CSS es el archivo de entrada. Simplemente copie la carpeta en su proyecto y haga referencia a él usando la etiqueta <Link />.

Parámetros de línea de comando y elementos de configuración

Puede usar el parámetro --help para ver la información de ayuda en cualquier momento.

• url de parámetros

  La herramienta solo acepta un parámetro, es decir, el enlace de fuentes en línea de Google Fonts, asegúrese de que el enlace apunte a un archivo CSS.

• Configuración item -r, --root <path>

  El archivo CSS de entrada de fuente introduce el prefijo de ruta del archivo fuente de fuentes, que predeterminada es la ruta relativa del mismo nivel ( por lo que, por defecto, debe colocar el CSS de entrada y los archivos fuente de fuentes en el directorio del mismo nivel ).

  Puede usar este parámetro para especificar la ubicación de almacenamiento del archivo fuente de fuente. Por ejemplo, almacene las fuentes en una red CDN separada:

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

• Elemento de configuración -d, --dist <savePath>

  La ubicación predeterminada donde se descargará el archivo de fuentes es ./font-result --result.

• Artículo de configuración -n, --name <fileName>

  El nombre del archivo de entrada de fuente, es decir, el nombre de la carpeta en el directorio de descarga y el nombre del archivo de entrada CSS dentro de él.

  Por defecto, se analizará desde el enlace de Google Fonts proporcionado, y la marca de tiempo de milisegundos actual se utilizará cuando falle la resolución.

• Elemento de configuración -c, --concurrent <number>

  El número de concurrencia al descargar archivos de fuente de fuente dividida, predeterminada a 30.

Citando en un proyecto

La forma de usar es muy simple, solo necesita usar <link href="xxx.css" rel="stylesheet"> para introducir el archivo de entrada de fuentes descargado.

Aquí hay algunas referencias de marco comunes (suponiendo que los archivos de fuentes descargados se almacenan en la carpeta Noto-SANS-SC, y el archivo de entrada es noto-sans-sc/noto-sans-sc.css ):

Vue2 (Vue-cli)

Copie la carpeta de fuente descargada en /public del proyecto VUE2.

Consulte el archivo de entrada de fuente en /public/index.html :

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

Luego establezca la fuente de fuentes donde la necesite:

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

VUE3 (VITE)

Copie la carpeta de fuente descargada en /public del proyecto VITE.

Consulte el archivo de entrada de fuente en /index.html :

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

Finalmente, configure la familia de fuentes donde sea necesario.

Reaccionar (crear react-app)

Primero copie la carpeta de fuente descargada en /public del proyecto React.

Luego consulte el archivo de entrada de fuente en /public/index.html :

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

Finalmente, configure la familia de fuentes donde sea necesario.

licencia

Consulte la licencia Google-Fonts para más detalles.

referirse a

Esta herramienta utiliza el siguiente desarrollo de dependencia: T-tree de nodo FS-Extra Chalk-Fetch.