google font splitter

google-font-splitter

將google-font 提供的在線字體文件下載至本地的工具。

google-font 提供的在線字體使用了unicode-range進行了字體包分割，可以有效的提升字體的加載速度。

但由於網絡、環境等問題影響，某些項目不能正常的引用google 字體，所以這個工具會將指定的谷歌在線下載至本地，以便於項目直接本地引用。

安裝

需求： node 12+

npm install -g google-font-splitter

如何使用

本工具的使用分為兩步，獲取在線字體鏈接、下載字體文件。

第一步：獲取在線字體鏈接

打開google fonts，搜索選擇要下載的字體。

在字體詳情頁向下滾動找到Styles，並在點擊要使用的字體右側的Select this style按鈕。

在右側的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:projectgoogle-font-splitterfont-resultnoto-sans-sc

然後你就可以在日誌最後一行的文件夾中找到下載好的字體文件夾了，目錄如下：

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

包含一個存放分割好的字體文件的文件夾和一個與目錄同名的css 文件，這個css 文件即為入口文件。只需要將該文件夾複製到你的項目中並使用<link /> 標籤引用進來即可。

命令行參數及配置項

你可以隨時使用--help參數查看幫助信息。

• 參數url

  工具只接受一個參數，即google fonts 的在線字體鏈接，請確保該鏈接指向的是一個css 文件。

• 配置項-r, --root <path>

  字體入口css 文件引入字體源文件的路徑前綴，默認為同級相對路徑（所以默認時需要把入口css 和字體源文件放在同級目錄下）。

  你可以通過該參數指定字體源文件的存放位置。例如將字體存放至獨立的cdn 網絡：

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

• 配置項-d, --dist <savePath>

  字體文件要下載到的位置，默認為./font-result 。

• 配置項-n, --name <fileName>

  字體入口文件的名稱，即下載目錄中的文件夾名稱和其中的入口css 文件名。

  默認會從提供的google fonts 鏈接中解析，當解析失敗時會使用當前的毫秒時間戳。

• 配置項-c, --concurrent <number>

  下載分割的字體源文件時的並發數量，默認為30。

在項目中引用

使用方式非常簡單，只需要使用<link href="xxx.css" rel="stylesheet">將下載好的字體入口文件引入進來即可。

下面是一些常見框架的引用方式（假定下載好的字體文件存放在noto-sans-sc 文件夾中，且入口文件為noto-sans-sc/noto-sans-sc.css ）：

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中引用字體入口文件：

 <!-- 注意 vite 项目直接从根目录引用 public 中的文件即可 -->
< 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 即可。

許可

詳見google-fonts license。

參考

本工具使用如下依賴開發: fs-extra chalk node-fetch css-tree。