Google Font Splitter 使用教程

Google Font Splitter 使用教程

1. 项目介绍

google-font-splitter 是一个简单的命令行工具，用于将 Google Fonts 提供的在线字体文件下载至本地。Google Fonts 提供的在线字体使用了 unicode-range 进行了字体包分割，以提升字体的加载速度。然而，由于网络或环境问题，某些项目可能无法正常引用 Google 字体。因此，google-font-splitter 工具可以将指定的谷歌在线字体下载至本地，以便项目直接本地引用。

2. 项目快速启动

安装

首先，确保你的 Node.js 版本为 12 或更高。然后使用 npm 全局安装 google-font-splitter：

npm install -g google-font-splitter

使用

使用该工具分为两步：获取在线字体链接、下载字体文件。

第一步：获取在线字体链接

1. 打开 Google Fonts，搜索并选择要下载的字体。
2. 在字体详情页向下滚动，找到 Styles，并点击要使用的字体右侧的 Select this style 按钮。
3. 在右侧的 Selected family 面板下方找到在线字体链接，并将其复制出来（只需要链接，不需要复制整行 link 标签）。

第二步：下载字体文件

找一个空文件夹，并执行如下命令：

google-font-splitter "https://你复制出的在线字体链接"

例如：

google-font-splitter "https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@100;300;400&display=swap"

回车后，工具将会打印如下输出：

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:\project\google-font-splitter\font-result\noto-sans-sc

然后你就可以在日志最后一行的文件夹中找到下载好的字体文件夹了。

3. 应用案例和最佳实践

在项目中引用

使用方式非常简单，只需要使用 <link href="xxx.css" rel="stylesheet"> 将下载好的字体入口文件引入进来即可。

Vue2（vue-cli）

将下载好的字体文件夹复制进 Vue2 项目的 /public 中。

在 /public/index.html 中引用字体入口文件：

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

然后在需要的地方设置字体 font-family 即可：

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

Vue3（vite）

将下载好的字体文件夹复制进 Vite 项目的 /public 中。

在 /index.html 中引用字体入口文件：

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

最后在需要的地方设置字体 font-family 即可。

React（create-react-app）

首先将下载好的字体文件夹复制进 React 项目的 /public 中。

然后在 /public/index.html 中引用字体入口文件：

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

最后在需要的地方设置字体 font-family 即可。

4. 典型生态项目

Google Fonts

google-font-splitter 主要用于处理 Google Fonts 提供的在线字体。Google Fonts 是一个强大的开源字体库，提供了丰富的字体选择，适用于各种项目。

Vue.js

Vue.js 是一个流行的前端框架，广泛用于构建单页应用（SPA）。通过 google-font-splitter，开发者可以轻松地将 Google Fonts 集成到 Vue.js 项目中。

React

React 是另一个广泛使用的前端框架，特别适用于构建复杂的用户界面。通过 google-font-splitter，开发者可以方便地将 Google Fonts 集成到 React 项目中。

Vite

Vite 是一个现代化的前端构建工具，特别适用于 Vue.js 和 React 项目。通过 google-font-splitter，开发者可以轻松地将 Google Fonts 集成到 Vite 项目中。

通过以上步骤，你可以轻松地将 Google Fonts 集成到你的项目中，提升用户体验。