google font splitter

Google-font-splitter

Alat untuk mengunduh file font online yang disediakan oleh Google-Font ke situs lokal Anda.

Font online yang disediakan oleh Google-Font menggunakan unicode-range untuk segmentasi paket font, yang secara efektif dapat meningkatkan kecepatan pemuatan font.

Namun, karena jaringan, lingkungan, dan masalah lainnya, beberapa proyek tidak dapat merujuk Google Font secara normal, sehingga alat ini akan mengunduh Google Online yang ditentukan ke lokal untuk memfasilitasi proyek untuk secara langsung merujuk secara lokal.

Memasang

Persyaratan: node 12+

npm install -g google-font-splitter

Cara menggunakan

Penggunaan alat ini dibagi menjadi dua langkah, mendapatkan tautan font online dan mengunduh file font.

Langkah 1: Dapatkan tautan font online

Buka Google Font dan cari untuk memilih font yang ingin Anda unduh.

Gulir ke bawah pada halaman Detail Font untuk menemukan gaya dan klik tombol Pilih Gaya ini di sebelah kanan font yang ingin Anda gunakan.

Temukan tautan font online di bawah panel keluarga yang dipilih di sebelah kanan dan salin (hanya tautan, tidak perlu menyalin seluruh tag tautan baris):

Langkah 2: Unduh file font

Temukan folder kosong dan jalankan perintah berikut:

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

Setelah masuk, alat akan mencetak output berikut:

 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

Kemudian Anda dapat menemukan folder font yang diunduh di folder di baris terakhir log, direktori adalah sebagai berikut:

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

Berisi folder yang menyimpan file font terpisah dan file CSS dengan nama yang sama dengan direktori. File CSS ini adalah file entri. Cukup salin folder ke dalam proyek Anda dan referensi menggunakan tag <link />.

Parameter baris perintah dan item konfigurasi

Anda dapat menggunakan parameter --help untuk melihat informasi bantuan kapan saja.

• url parameter

  Alat ini hanya menerima satu parameter, yaitu tautan font online Google Font, pastikan bahwa tautan menunjuk ke file CSS.

• Item Konfigurasi -r, --root <path>

  File Font Entri CSS memperkenalkan awalan jalur file sumber font, yang default ke jalur relatif tingkat yang sama ( jadi secara default, Anda perlu menempatkan entri CSS dan file sumber font di direktori tingkat yang sama ).

  Anda dapat menggunakan parameter ini untuk menentukan lokasi penyimpanan file sumber font. Misalnya, simpan font pada jaringan CDN terpisah:

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

• Item Konfigurasi -d, --dist <savePath>

  Lokasi default di mana file font akan diunduh adalah ./font-result .

• Item konfigurasi -n, --name <fileName>

  Nama file entri font, yaitu nama folder di direktori unduhan dan nama file entri CSS di dalamnya.

  Secara default, itu akan diuraikan dari tautan Google Fonts yang disediakan, dan cap waktu milidetik saat ini akan digunakan ketika resolusi gagal.

• Item Konfigurasi -c, --concurrent <number>

  Jumlah konkurensi saat mengunduh file sumber font split, default ke 30.

Mengutip dalam sebuah proyek

Cara menggunakan sangat sederhana, Anda hanya perlu menggunakan <link href="xxx.css" rel="stylesheet"> Untuk memperkenalkan file entri font yang diunduh.

Berikut adalah beberapa referensi kerangka kerja umum (dengan asumsi bahwa file font yang diunduh disimpan di folder noto-sans-ss, dan file entri adalah noto-sans-sc/noto-sans-sc.css ):

vue2 (vue-cli)

Salin folder font yang diunduh ke /public dari proyek VUE2.

Lihat file entri font di /public/index.html :

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

Kemudian atur font-family di mana Anda membutuhkannya:

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

VUE3 (Vite)

Salin folder font yang diunduh ke /public dari Proyek Vite.

Lihat file entri font di /index.html :

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

Akhirnya, atur keluarga font di mana diperlukan.

bereaksi (create-react-app)

Salin pertama -tama folder font yang diunduh ke /public dari proyek React.

Kemudian lihat file entri font di /public/index.html :

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

Akhirnya, atur keluarga font di mana diperlukan.

lisensi

Lihat Lisensi Google-Font untuk detailnya.

merujuk ke

Alat ini menggunakan pengembangan ketergantungan berikut: FS-Extra Chalk-Fetch CSS-Tree.