google font splitter
1.0.0
أداة لتنزيل ملفات الخطوط عبر الإنترنت التي توفرها Google-Font إلى موقعك المحلي.
تستخدم الخطوط عبر الإنترنت التي توفرها Google-Font unicode-range لتجزئة حزمة الخطوط ، والتي يمكن أن تحسن بشكل فعال من سرعة التحميل للخطوط.
ومع ذلك ، نظرًا للشبكة والبيئة والمشكلات الأخرى ، لا يمكن لبعض المشاريع الرجوع إلى Google Fonts بشكل طبيعي ، لذلك ستقوم هذه الأداة بتنزيل Google Online المحدد إلى تسهيل المشروع محليًا للرجوع إليها محليًا مباشرة.
المتطلبات: node 12+
npm install -g google-font-splitterيتم تقسيم استخدام هذه الأداة إلى خطوتين ، والحصول على روابط الخطوط عبر الإنترنت وتنزيل ملفات الخطوط.
الخطوة 1: احصل على روابط الخطوط عبر الإنترنت
افتح خطوط Google وابحث لتحديد الخط الذي تريد تنزيله.
قم بالتمرير لأسفل على صفحة تفاصيل الخط للعثور على الأنماط وانقر فوق الزر "حدد هذا النمط" على يمين الخط الذي تريد استخدامه.
ابحث عن رابط الخط عبر الإنترنت أسفل لوحة الأسرة المحددة على اليمين وقم بنسخها (مجرد رابط ، لا حاجة لنسخ علامة ارتباط السطر بأكملها):
الخطوة 2: قم بتنزيل ملف الخط
ابحث عن مجلد فارغ وقم بتنفيذ الأمر التالي:
google-font-splitter " https://你复制出的在线字体链接"
# 例如 google-font-splitter "https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@100;300;400&display=swap"بعد الدخول ، ستطبع الأداة الإخراج التالي:
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
ثم يمكنك العثور على مجلد الخط الذي تم تنزيله في المجلد على السطر الأخير من السجل ، والدليل هو كما يلي:
noto-sans-sc
├── s/notosanssc/xxx/...
└── noto-sans-sc.css
يحتوي على مجلد يقوم بتخزين ملفات الخطوط وملف CSS بنفس اسم الدليل. ملف CSS هذا هو ملف الدخول. ما عليك سوى نسخ المجلد إلى مشروعك وأرجعه باستخدام علامة <link />.
يمكنك استخدام المعلمة --help لعرض معلومات المساعدة في أي وقت.
المعلمة url
تقبل الأداة معلمة واحدة فقط ، أي رابط الخط عبر الإنترنت لخطوط Google ، تأكد من أن الرابط يشير إلى ملف CSS.
عنصر التكوين -r, --root <path>
يقدم ملف إدخال FONT CSS بادئة المسار لملف مصدر الخط ، والذي يتخلف عن المسار النسبي من نفس المستوى ( لذلك افتراضيًا ، تحتاج إلى وضع ملفات CSS ومرف الخط في الدليل من نفس المستوى ).
يمكنك استخدام هذه المعلمة لتحديد موقع تخزين ملف مصدر الخط. على سبيل المثال ، تخزين الخطوط على شبكة CDN منفصلة:
google-font-splitter "https://fonts.googleapis.com/..." -r https://your-custom-cdn/public/fonts/
عنصر التكوين -d, --dist <savePath>
الموقع الافتراضي حيث يتم تنزيل ملف الخط هو ./font-result .
عنصر التكوين -n, --name <fileName>
اسم ملف إدخال الخط ، أي اسم المجلد في دليل التنزيل واسم ملف الإدخال CSS بداخله.
بشكل افتراضي ، سيتم تحليله من رابط خطوط Google المقدم ، وسيتم استخدام الطابع الزمني الحالي للميلي ثانية عند فشل الدقة.
عنصر التكوين -c, --concurrent <number>
عدد التزامن عند تنزيل ملفات مصدر الخطوط المقسمة ، الافتراضي إلى 30.
طريقة الاستخدام بسيطة للغاية ، تحتاج فقط إلى استخدام <link href="xxx.css" rel="stylesheet"> لتقديم ملف إدخال الخط الذي تم تنزيله.
فيما يلي بعض المراجع الإطارية الشائعة (على افتراض أن ملفات الخطوط التي تم تنزيلها يتم تخزينها في مجلد Noto-SANS-SC ، وملف الإدخال هو noto-sans-sc/noto-sans-sc.css ):
Vue2 (Vue-Cli)
انسخ مجلد الخط الذي تم تنزيله في /public مشروع VUE2.
ارجع إلى ملف إدخال الخط في /public/index.html :
< link href =" <%= BASE_URL %>noto-sans-sc/noto-sans-sc.css " rel =" stylesheet " >ثم اضبط عائلة الخط حيث تحتاجه:
# app {
font-family : 'Noto Sans SC' , sans-serif;
}Vue3 (Vite)
انسخ مجلد الخط الذي تم تنزيله إلى /public مشروع Vite.
ارجع إلى ملف إدخال الخط في /index.html :
<!-- 注意 vite 项目直接从根目录引用 public 中的文件即可 -->
< link href =" /noto-sans-sc/noto-sans-sc.css " rel =" stylesheet " >أخيرًا ، قم بتعيين عائلة الخط عند الحاجة.
رد فعل (إنشاء-تطبيق)
نسخ أولاً مجلد الخط الذي تم تنزيله إلى /public لمشروع React.
ثم ارجع إلى ملف إدخال الخط في /public/index.html :
< link href =" %PUBLIC_URL%/noto-sans-sc/noto-sans-sc.css " rel =" stylesheet " >أخيرًا ، قم بتعيين عائلة الخط عند الحاجة.
راجع ترخيص Google-Fonts للحصول على التفاصيل.
تستخدم هذه الأداة تطوير التبعية التالي: FS-Extra Chalk Node-Betch-Tree.
