ดาวน์โหลด google font metadata - google font metadata Source Source Download

ข้อมูลเมตาของ Google Font

เครื่องกำเนิดเมตาดาต้าที่ดึงและแยกวิเคราะห์ Google Fonts API เพื่อใช้เป็นหลักสำหรับ FontSource monorepo

การติดตั้ง

ติดตั้งแพ็คเกจจาก npm :

npm install google-font-metadata

การใช้งาน

โครงการส่งออกข้อมูลต่อไปนี้:

 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 ) ;

APIV1

ใช้ Google Fonts CSS APIV1 ที่มีไฟล์ตัวอักษรที่แตกต่างกันสำหรับแต่ละชุดย่อย แต่ไม่รวมค่า unicode-range โดยปกติจะไม่แนะนำ

มันส่งออก 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 "
  },
...
}

APIV2

ใช้ Google Fonts CSS APIV2 และรวมค่า unicode-range สำหรับทุกชุดย่อย อย่างไรก็ตาม API ให้บริการไฟล์ ttf ที่มีชุดย่อย ทั้งหมด ที่รวมอยู่ในไฟล์เดียวและดังนั้นลิงก์ทั้งหมดสำหรับประเภทไฟล์เหล่านั้นในชุดย่อยเดียวกันจะนำไปสู่ลิงก์เดียวกันสำหรับแต่ละน้ำหนักและสไตล์ ไฟล์ woff2 และ woff จะถูกแบ่งแยกเป็นรายบุคคลต่อชุดย่อย

ส่งออก 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 "
  },
...
}

โปรดทราบว่าฟอนต์ที่มีร่ายมนตร์ขนาดใหญ่เช่นภาษาญี่ปุ่นเกาหลีหรือภาษาจีนแบ่งออกเป็นชุดย่อย ที่มีหมายเลข เล็ก ๆ จำนวนมากซึ่งใช้ตัวเลือก @Fontface unicode-range ตัวอย่างคือ noto sans jp ซึ่งส่งคืนสิ่งต่อไปนี้:

{
...
 "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 "
            }
          },
          ...,
        },
        ...,
      }
    }
  }
...
}

ที่มีความหมาย

SCRAPES DIRECTORY Google FONTS และใช้ Google FONTS API เพื่อสร้างคำจำกัดความของแกนที่เกี่ยวข้องทั้งหมดและดาวน์โหลดข้อมูลเมตาตัวแปร คุณสามารถเรียนรู้แกนตัวอักษรตัวแปรเพิ่มเติมได้ที่นี่

มี 3 ตัวแปรเริ่มต้น:

wght - ลิงก์ไปยังไฟล์แบบอักษรที่มีแกน wght เท่านั้น
standard - ชุดฟอนต์เริ่มต้นที่มี wght, wdth, slnt, opsz Axis 'หากมี
full - ลิงก์ไปยังไฟล์แบบอักษรที่มีแกนทั้งหมดอยู่ในนั้น

นอกจากนี้ตัวแปรจะถูกสร้างขึ้นสำหรับแต่ละแกนที่ไม่ซ้ำกันในตัวอักษรเช่นถ้า wdth มีอยู่, variants.wdth.normal.latin จะมีอยู่ โปรดทราบว่าแกน wght นั้นรวมอยู่ในตัวแปรที่กำหนดเองที่ไม่ซ้ำกันแต่ละตัว

โปรดทราบว่าอาจไม่มีตัวแปร standard หรือ full รูปแบบหากไม่มีแกนที่เกี่ยวข้องในตัวอักษรสำหรับการจำแนกประเภทนั้น นี่คือการป้องกันตัวแปรที่ซ้ำกันด้วยชื่อที่แตกต่างกัน

ส่งออก 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 "
        }
      }
    }
  },
...
}

โปรดทราบว่าฟอนต์บางชนิดเช่น inter หรือ crentive มีแกน SLNT ซึ่งหมายถึง font-style ของพวกเขาใน CSS จะไม่เป็น normal หรือ italic บนคุณสมบัติ full แต่ oblique x deg x deg อ้างถึงอุปกรณ์ทดสอบ CSS สำหรับการเรียกซ้ำ ในขณะที่ยังคงแสดงให้เห็นตาม normal ในข้อมูลเมตามันขึ้นอยู่กับนักพัฒนาที่จะรวมรูปแบบ oblique หากพวกเขากำลังสร้าง CSS โดยใช้ค่า min และ max จาก recursive.axes.slnt

apidirect และ apivariabledirect

เหล่านี้เป็นอาร์เรย์ของวัตถุที่สร้างขึ้นจากคำสั่ง npx gfm generate [key] ไม่น่าเป็นไปได้ที่คุณจะใช้สิ่งนี้

 import { APIDirect , APIVariableDirect } from "google-font-metadata" ;
const { APIDirect , APIVariableDirect } = require ( "google-font-metadata" ) ;

ส่งออก data/api-response.json และ data/variable-response.json ตามลำดับ

apilicense

Scrapes หน้าแหล่งที่มาของ Google Fonts และส่งคืนวัตถุที่อ่านได้

{
...
  "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. "
  },
...
}

ส่งออก data/licenses.json

apiregistry

{
...
  {
    "name" : " Thick Stroke " ,
    "tag" : " XOPQ " ,
    "min" : -1000 ,
    "max" : 2000 ,
    "default" : 88 ,
    "precision" : 0
  },
...
}

ส่งออก data/axis-registry.json

คุณสามารถอ้างถึง src/index.ts และ src/data.ts เพื่อดูการส่งออกทั้งหมด

การอัปเดตไฟล์ API

คุณสามารถใช้เครื่องมือ gfm CLI เพื่ออัปเดตข้อมูลเมตาด้วยผลลัพธ์ที่สดใหม่จาก Google APIs

npx gfm generate [key] - ดึงข้อมูล Google Fonts Fonts API เริ่มต้นซึ่งสามารถใช้สำหรับการแยกวิเคราะห์ในภายหลัง สิ่งนี้จะต้องเรียกก่อน npx gfm parse

ธง:

-n, --normal -จะดึง API ของ Google Developer ปกติสำหรับ APIV1 และ APIV2 เท่านั้น
-v, --variable -เพียงขูดหน้าแกนตัวแปรสำหรับ apivariable key หมายเหตุไม่จำเป็นต้องได้รับหากผ่านตัวเลือกนี้

คุณสามารถรับ key Google Fonts API ได้จากที่นี่ หรือคุณสามารถใช้ไฟล์ .env กับ API_KEY=keyvalue แทนการให้อาร์กิวเมนต์คีย์ในคำสั่ง

npx gfm parse - แยกวิเคราะห์ผ่าน Google Fonts CSS API และสร้างข้อมูลเมตาเต็มรูปแบบโดยใช้ข้อมูลคำสั่ง generate

ธง:

-1, --v1 -แยกวิเคราะห์และอัปเดต APIV1 เท่านั้น
-2, --v2 -แยกวิเคราะห์และอัปเดต APIV2 เท่านั้น
-v, --variable -แยกวิเคราะห์และอัปเดต apivariable เท่านั้น
-l, --license -แยกวิเคราะห์และอัปเดต apilicense เท่านั้น
-f, --force -สิ่งนี้ข้ามแคชและบังคับให้วิเคราะห์ทุกแบบอักษร
--no-validate การข้ามสิ่งนี้เรียกใช้ npx gfm validate หลังจากเสร็จสิ้นการแยกวิเคราะห์

npx gfm validate - คำสั่ง HELPER เพื่อตรวจสอบข้อมูลเมตาของคุณด้วยสคีมา สิ่งนี้จะถูกเรียกใช้โดยอัตโนมัติด้วย npx gfm parse

ธง: