google font metadata -Download - google font metadata -Quellcode herunterladen

Google -Schriftmetadaten

Ein Metadatengenerator, der die Google -Schriftart -API abreißt und analysiert wird, die hauptsächlich für die Fontsource Monorepo verwendet werden soll.

Installation

Installieren Sie das Paket von npm :

npm install google-font-metadata

Verwendung

Das Projekt exportiert die folgenden Daten:

 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

Verwendet die Google-Schriftarten CSS APIV1, die für jede Teilmenge unterschiedliche Schriftdateien enthält, jedoch keine Unicode-Range-Werte enthält. Dies wird normalerweise nicht empfohlen.

Es exportiert 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

Verwendet die Google-Schriftarten CSS apiv2 und enthält die Unicode-Range-Werte für jede Teilmenge. Die API dient jedoch ttf -Dateien mit allen in einer Datei enthaltenen Teilmengen, und daher führen alle Links für diese Dateitypen in derselben Teilmenge zu demselben Link für jedes Gewicht und jeden Stil. woff2 und woff -Dateien werden einzeln pro Teilmenge geteilt.

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

Beachten Sie, dass Schriftarten mit großen Glyphsets wie japanischer, koreanischer oder chinesischer Sprache in viele kleinere nummerierte Teilmengen unterteilt sind, die den Unicode-Range @Fontface-Selektor verwenden. Ein Beispiel ist Noto Sans JP, der Folgendes zurückgibt:

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

Apivariable

Kratzt das Verzeichnis von Google Fonts und verwendet die Google -Schriftarten -API, um alle relevanten Achsendefinitionen zu generieren und Variante -Metadaten herunterzuladen. Sie können hier eine variablere Schriftachse erfahren.

Es gibt 3 Standardvarianten:

wght - Nur Links zu Schriftdateien, die nur die wght -Achse haben.
standard - Ein Standardsatz von Schriftarten, die wght, wdth, slnt, opsz -Achse 'enthält, falls verfügbar.
full - Links zu Schriftdateien, in denen alle Achsen enthalten sind.

Darüber hinaus wird eine Variante für jede einzelne Achse in der Schriftart erzeugt, z. B. wenn wdth existiert, variants.wdth.normal.latin wird existieren. Beachten Sie, dass die wght -Achse auch in jeder einzigartigen benutzerdefinierten Variante enthalten ist.

Beachten Sie, dass standard oder full möglicherweise nicht vorhanden sind, wenn für diese Klassifizierung keine relevanten Achsen in der Schriftart enthalten. Dies soll doppelte Varianten mit unterschiedlichen Namen verhindern.

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

Beachten Sie, dass bestimmte Schriftarten wie Inter oder Rekursiv die SLNT-Achse haben, was bedeutet, dass ihr font-style in CSS auf der Eigenschaft nicht normal oder italic ist, aber full oblique x deg x deg . Siehe die CSS -Testanlage für rekursive. Während es in Metadaten immer noch als normal zeigt, liegt es an dem Entwickler, den oblique Stil einzubeziehen, wenn sie CSS unter Verwendung der min und max Werte aus recursive.axes.slnt -Eigenschaft erzeugen.

Apidirect und Apivariable

Dies sind Arrays von generierten Objekten aus dem Befehl npx gfm generate [key] . Es ist unwahrscheinlich, dass Sie dies verwenden werden.

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

Exportiert data/api-response.json und data/variable-response.json .

Offenbarung

Kratzt die Seite "Google Fonts Attribution" und gibt ein lesbares Objekt zurück.

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

Exportiert data/licenses.json

Apiregistry

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

Exportiert data/axis-registry.json

Sie können sich unter src/index.ts und src/data.ts beziehen, um alle Exporte anzuzeigen.

Aktualisieren von API -Dateien

Sie können das gfm CLI -Tool verwenden, um die Metadaten mit neuen Ergebnissen der Google -APIs zu aktualisieren.

npx gfm generate [key] - holt die Standard -Google -Schriftarten -API ab, die zum späteren Parsen verwendet werden kann. Dies muss vor npx gfm parse genannt werden.

Flaggen:

-n, --normal -holen nur die normale Google -Entwickler -API für Apiv1 und Apiv2.
-v, --variable -Kratzen Sie nur die Seite der variablen Achse für Apivariable ab. key muss nicht angegeben werden, wenn diese Option übergeben wird.

Hier können Sie einen Google Fonts -API key erhalten. Alternativ können Sie eine .env -Datei mit API_KEY=keyvalue verwenden, anstatt ein Schlüsselargument im Befehl vorzulegen.

npx gfm parse - Parse durch die Google -Schriftarten -CSS -API und generieren Sie die vollständigen Metadaten mit den Befehlsdaten generate .

Flaggen:

-1, --v1 -NUR APIV1 analysieren und aktualisieren.
-2, --v2 -NUR APIV2 analysieren und aktualisieren.
-v, --variable -Nur apivariable analysieren und aktualisieren.
-l, --license -NUR EPILICENSE UND UPDATE.
-f, --force -Dies überspringt den Cache und erzwingt jede Schriftart.
--no-validate -Dies überspringt, dass npx gfm validate .

npx gfm validate - Helper -Befehl zur Überprüfung Ihrer vorhandenen Metadaten mit einem Schema. Dies wird automatisch mit npx gfm parse aufgerufen.

Flaggen: