Generator metadata yang mengambil dan mem -parsing Google Fonts API yang akan digunakan untuk monorepo Fontsource.
Instal paket dari npm :
npm install google-font-metadataProyek mengekspor data berikut:
import {
APIv1 ,
APIv2 ,
APIVariable ,
APIIconStatic ,
APIIconVariable ,
APILicense ,
APIRegistry ,
} from "google-font-metadata" ;
const {
APIv1 ,
APIv2 ,
APIVariable ,
APIIconStatic ,
APIIconVariable ,
APILicense ,
APIRegistry ,
} = require ( "google-font-metadata" ) ;
console . dir ( APIv2 ) ; Menggunakan Google Font CSS APIV1 yang mencakup file font yang berbeda untuk setiap subset, tetapi tidak termasuk nilai unicode-range. Ini biasanya tidak disarankan.
Ini mengekspor data/google-fonts-v1.json .
{
...
"abel" : {
"family" : " Abel " ,
"id" : " abel " ,
"subsets" : [ " latin " ],
"weights" : [ 400 ],
"styles" : [ " normal " ],
"variants" : {
"400" : {
"normal" : {
"latin" : {
"url" : {
"woff2" : " https://fonts.gstatic.com/s/abel/v18/MwQ5bhbm2POE2V9BPQ.woff2 " ,
"woff" : " https://fonts.gstatic.com/s/abel/v18/MwQ5bhbm2POE2V9BOw.woff " ,
"truetype" : " https://fonts.gstatic.com/s/abel/v18/MwQ5bhbm2POE2V9BOA.ttf "
}
}
}
}
},
"defSubset" : " latin " ,
"lastModified" : " 2022-04-20 " ,
"version" : " v18 " ,
"category" : " sans-serif "
},
...
} Menggunakan Google Fonts CSS APIV2 dan termasuk nilai unicode-range untuk setiap subset. Namun, API melayani file ttf dengan semua himpunan bagian yang termasuk dalam satu file dan oleh karena itu semua tautan untuk jenis file tersebut dalam subset yang sama mengarah ke tautan yang sama untuk setiap bobot dan gaya. File woff2 dan woff secara individual dibagi per subset.
Ekspor data/google-fonts-v2.json .
{
...
"abel" : {
"family" : " Abel " ,
"id" : " abel " ,
"subsets" : [ " latin " ],
"weights" : [ 400 ],
"styles" : [ " normal " ],
"unicodeRange" : {
"latin" : " U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD "
},
"variants" : {
"400" : {
"normal" : {
"latin" : {
"url" : {
"woff2" : " https://fonts.gstatic.com/s/abel/v18/MwQ5bhbm2POE2V9BPQ.woff2 " ,
"woff" : " https://fonts.gstatic.com/s/abel/v18/MwQ5bhbm2POE6Vs.woff " ,
"truetype" : " https://fonts.gstatic.com/s/abel/v18/MwQ5bhbm2POE6Vg.ttf "
}
}
}
}
},
"defSubset" : " latin " ,
"lastModified" : " 2022-04-20 " ,
"version" : " v18 " ,
"category" : " sans-serif "
},
...
}Perhatikan bahwa font dengan mesin terbang besar seperti bahasa Jepang, Korea atau Cina, dibagi menjadi banyak himpunan bagian bernomor lebih kecil yang memanfaatkan pemilih @FontFace unicode-range. Contohnya adalah noto sans jp yang mengembalikan berikut ini:
{
...
"noto-sans-jp" : {
"family" : " Noto Sans JP " ,
"id" : " noto-sans-jp " ,
"subsets" : [ " japanese " , " latin " ],
"weights" : [ 100 , 300 , 400 , 500 , 700 , 900 ],
"styles" : [ " normal " ],
"unicodeRange" : {
"[0]" : " U+25ee8,...,U+2f9f4 " ,
"[1]" : " U+1f235-1f23b,...,U+25ed8 " ,
...
"[119]" : " U+20,...,U+ff0e "
},
"variants" : {
"100" : {
"normal" : {
"[0]" : {
"url" : {
"woff2" : " https://fonts.gstatic.com/s/notosansjp/v42/-F6ofjtqLzI2JPCgQBnw7HFQoggPkENvl4B0ZLgOquiXidBa3qHiDcp2RQ.0.woff2 " ,
"woff" : " https://fonts.gstatic.com/s/notosansjp/v42/-F62fjtqLzI2JPCgQBnw7HFoxQII2lcnk-AFfrgQrvWXpdFg3KXxAMsKMbdN.0.woff " ,
"opentype" : " https://fonts.gstatic.com/s/notosansjp/v42/-F6ofjtqLzI2JPCgQBnw7HFQoggM.otf "
}
},
...,
},
...,
}
}
}
...
}Menggoreskan direktori Google Fonts dan menggunakan API Google Fonts untuk menghasilkan semua definisi sumbu yang relevan dan mengunduh varian metadata. Anda dapat mempelajari lebih banyak poros font variabel 'di sini.
Ada 3 varian default:
wght - Hanya tautan ke file font yang hanya memiliki sumbu wght .standard - Satu set font default yang mencakup wght, wdth, slnt, opsz Axis 'jika tersedia.full - Tautan ke file font yang memiliki semua sumbu termasuk di dalamnya. Selain itu, varian dihasilkan untuk setiap sumbu unik dalam font, misalnya jika wdth ada, variants.wdth.normal.latin akan ada. Perhatikan bahwa sumbu wght juga termasuk dalam setiap varian khusus yang unik.
Perhatikan bahwa varian standard atau full mungkin tidak ada jika tidak ada sumbu yang relevan dalam font untuk klasifikasi itu. Ini untuk mencegah varian duplikat dengan nama yang berbeda.
Ekspor data/variable.json .
{
...
"akshar" : {
"family" : " Akshar " ,
"id" : " akshar " ,
"axes" : {
"wght" : { "default" : " 400 " , "min" : " 300 " , "max" : " 700 " , "step" : " 1 " }
},
"variants" : {
"wght" : {
"normal" : {
"devanagari" : " https://fonts.gstatic.com/s/akshar/v5/Yq6V-LyHWTfz9rGCpR5lhOc.woff2 " ,
"latin-ext" : " https://fonts.gstatic.com/s/akshar/v5/Yq6V-LyHWTfz9rGCqh5lhOc.woff2 " ,
"latin" : " https://fonts.gstatic.com/s/akshar/v5/Yq6V-LyHWTfz9rGCpB5l.woff2 "
}
},
"full" : {
"normal" : {
"devanagari" : " https://fonts.gstatic.com/s/akshar/v5/Yq6V-LyHWTfz9rGCpR5lhOc.woff2 " ,
"latin-ext" : " https://fonts.gstatic.com/s/akshar/v5/Yq6V-LyHWTfz9rGCqh5lhOc.woff2 " ,
"latin" : " https://fonts.gstatic.com/s/akshar/v5/Yq6V-LyHWTfz9rGCpB5l.woff2 "
}
},
"standard" : {
"normal" : {
"devanagari" : " https://fonts.gstatic.com/s/akshar/v5/Yq6V-LyHWTfz9rGCpR5lhOc.woff2 " ,
"latin-ext" : " https://fonts.gstatic.com/s/akshar/v5/Yq6V-LyHWTfz9rGCqh5lhOc.woff2 " ,
"latin" : " https://fonts.gstatic.com/s/akshar/v5/Yq6V-LyHWTfz9rGCpB5l.woff2 "
}
}
}
},
...
} Perhatikan bahwa font tertentu seperti Inter atau Recursive memiliki sumbu SLNT, yang berarti font-style mereka di CSS tidak akan normal atau italic pada properti full tetapi oblique x deg x deg . Lihat perlengkapan uji CSS untuk rekursif. Meskipun masih ditampilkan seperti normal dalam metadata, tergantung pada pengembang untuk memasukkan gaya oblique jika mereka menghasilkan CSS menggunakan nilai min dan max dari properti recursive.axes.slnt .
Ini adalah array objek yang dihasilkan dari perintah npx gfm generate [key] . Tidak mungkin Anda akan menggunakan ini.
import { APIDirect , APIVariableDirect } from "google-font-metadata" ;
const { APIDirect , APIVariableDirect } = require ( "google-font-metadata" ) ; Ekspor data/api-response.json dan data/variable-response.json masing-masing.
Mengikis halaman atribusi Google Font dan mengembalikan objek yang dapat dibaca.
{
...
"abel" : {
"id" : " abel " ,
"authors" : {
"copyright" : " Copyright 2011, Matthew Desmond with Reserved Font Name Abel. " ,
"website" : " http://www.madtype.com " ,
"email" : " [email protected] "
},
"license" : {
"type" : " SIL Open Font License, 1.1 " ,
"url" : " http://scripts.sil.org/OFL "
},
"original" : " Copyright (c) 2011, Matthew Desmond (http://www.madtype.com | [email protected]), with Reserved Font Name Abel. "
},
...
} Ekspor data/licenses.json
{
...
{
"name" : " Thick Stroke " ,
"tag" : " XOPQ " ,
"min" : -1000 ,
"max" : 2000 ,
"default" : 88 ,
"precision" : 0
},
...
} Ekspor data/axis-registry.json
Anda dapat merujuk ke src/index.ts dan src/data.ts untuk melihat semua ekspor.
Anda dapat menggunakan alat gfm CLI untuk memperbarui metadata dengan hasil baru dari Google API.
npx gfm generate [key] - Mengambil API Google Fonts default yang dapat digunakan untuk penguraian nanti. Ini harus dipanggil sebelum npx gfm parse .
Bendera:
-n, --normal -Hanya ambil API pengembang Google normal untuk APIV1 dan APIV2.-v, --variable -Hanya mengikis halaman sumbu variabel untuk apivariabel. key Catatan tidak perlu diberikan jika opsi ini dilewatkan. Anda bisa mendapatkan nilai key API Google Fonts dari sini. Atau, Anda dapat menggunakan file .env dengan API_KEY=keyvalue alih -alih memberikan argumen kunci dalam perintah.
npx gfm parse - Parses melalui Google Font CSS API dan menghasilkan metadata penuh menggunakan data perintah generate .
Bendera:
-1, --v1 -Hanya parse dan perbarui APIV1.-2, --v2 -Hanya parse dan perbarui APIV2.-v, --variable -hanya parse dan perbarui apivariable.-l, --license -Hanya parse dan perbarui apilicense.-f, --force -Ini melewatkan cache dan memaksa parse setiap font.--no-validate -Ini melompati memohon npx gfm validate setelah menyelesaikan penguraian. npx gfm validate - Perintah helper untuk memvalidasi metadata Anda yang ada dengan skema. Ini secara otomatis dipanggil dengan npx gfm parse .
Bendera:
-1, --v1 -Hanya validasi APIV1.-2, --v2 -Hanya validasi APIV2.-v, --variable -Hanya validasi apivariabel.