google font splitter
1.0.0
Google-Fontが提供するオンラインフォントファイルをローカルサイトにダウンロードするツール。
Google-Fontが提供するオンラインフォントは、フォントパッケージセグメンテーションにunicode-rangeを使用しています。これにより、フォントの負荷速度が効果的に向上します。
ただし、ネットワーク、環境、その他の問題により、一部のプロジェクトはGoogleフォントを正常に参照できないため、このツールは指定されたGoogleオンラインをローカルにダウンロードして、プロジェクトを容易にしてローカルで直接参照します。
要件： node 12+
npm install -g google-font-splitterこのツールの使用は2つのステップに分割され、オンラインフォントリンクを取得し、フォントファイルをダウンロードします。
ステップ1：オンラインフォントリンクを取得します
Googleフォントを開いて検索して、ダウンロードするフォントを選択します。
フォントの詳細ページを下にスクロールしてスタイルを見つけ、使用するフォントの右側にある[このスタイル]ボタンをクリックします。
右側の選択したファミリパネルの下にあるオンラインフォントリンクを見つけて、コピーします（リンクだけで、ラインリンクタグ全体をコピーする必要はありません）：
ステップ2：フォントファイルをダウンロードします
空のフォルダーを見つけて、次のコマンドを実行します。
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
このツールは、1つのパラメーターのみを受け入れます。つまり、Googleフォントのオンラインフォントリンクは、リンクが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 " >次に、必要なフォントファミリーを設定します。
# 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 " >最後に、必要に応じてフォントファミリーを設定します。
React（Create-React-App）
最初にダウンロードしたフォントフォルダーをReactプロジェクトの/publicにコピーします。
次に、 /public/index.html index.htmlのフォントエントリファイルを参照してください。
< link href =" %PUBLIC_URL%/noto-sans-sc/noto-sans-sc.css " rel =" stylesheet " >最後に、必要に応じてフォントファミリーを設定します。
詳細については、Google-Fontsライセンスを参照してください。
このツールは、次の依存関係の開発を使用します：FS-Extra Chalk Node-Fetch CSS-Tree。
