google font metadata

بيانات تعريف Google Font

مولد بيانات التعريف الذي يجلب ويخوض واجهة برمجة تطبيقات Google Fonts ليتم استخدامه بشكل أساسي في 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 الذي يتضمن ملفات خطوط مختلفة لكل مجموعة فرعية ، ولكنها لا تتضمن قيمًا وحيدًا. هذا لا ينصح عادة.

يصدر 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 لكل مجموعة فرعية. ومع ذلك ، يقدم 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. مثال على ذلك هو 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 "
            }
          },
          ...,
        },
        ...,
      }
    }
  }
...
}

apivariable

قم بإخلاص دليل Google Fonts ويستخدم واجهة برمجة تطبيقات Google Fonts لإنشاء جميع تعريفات المحور ذات الصلة وتنزيل بيانات التعريف المتغيرة. يمكنك معرفة المزيد من محور الخط المتغير هنا.

هناك 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 أو العودية لها محور SLNT ، مما يعني أن font-style في CSS لن يكون normal أو italic على خاصية full ولكن oblique x deg x deg . الرجوع إلى اختبار اختبار CSS للعودية. بينما لا يزال يظهر بشكل normal في البيانات الوصفية ، فإن الأمر متروك للمطور لتضمين النمط oblique إذا قاموا بتوليد CSS باستخدام قيم min و max من خاصية recursive.axes.slnt .

apidirect و apivariablerect

هذه هي صفائف من الكائنات التي 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

قم بتدوير صفحة إسناد Fonts Google وإرجاع كائن قابل للقراءة.

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

npx gfm generate [key] - يجلب واجهة برمجة تطبيقات Google Fonts الافتراضية التي يمكن استخدامها للحلية لاحقًا. يجب استدعاء هذا قبل npx gfm parse .

الأعلام:

• -n, --normal -فقط أحضر واجهة برمجة تطبيقات مطور Google العادية لـ APIV1 و APIV2.
• -v, --variable -فقط كشط صفحة المحور المتغير لـ apivariable. ملاحظة key لا يلزم إعطاءه إذا تم تمرير هذا الخيار.

يمكنك الحصول على قيمة key API لـ Google Fonts من هنا. بدلاً من ذلك ، يمكنك استخدام ملف .env مع API_KEY=keyvalue بدلاً من توفير وسيطة مفتاح في الأمر.

npx gfm parse - يتم تحليله من خلال واجهة برمجة تطبيقات Google Fonts CSS وإنشاء بيانات تعريف كاملة باستخدام بيانات 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 .

الأعلام:

• -1, --v1 -التحقق من صحة APIV1 فقط.
• -2, --v2 -التحقق من صحة APIV2 فقط.
• -v, --variable -التحقق من صحة apivariable فقط.