الصفحة الرئيسية>موارد بناء الموقع>تحميل الخط
تنزيل

استضافت Font Google Local

زاحف الويب التلقائي لاستخراج خطوط Google وإعدادها للاستخدام المحلي. هذا أمر غير ضروري بسبب قانون حماية البيانات الأوروبي. (DSGVO) تنزيل وربط جميع ملفات الخطوط باليد أمر مرن. لذلك كتبت نصًا صغيرًا من Python لأتمتة العملية.

عند الوصول إلى جوجل خطوط عبر عنوان URL "fonts.googleapis.com" ، يتم إنشاء الملف بعد وقت قصير من الطلب. وبالتالي ، هناك حاجة إلى WebCrawler للوصول إلى عملية البيانات في وقت التشغيل.

متطلبات

  • متصفح Firefox
  • بيثون> 3.6
  • حزم Python Pip:
    • السيلينيوم
    • Geckodriver-autoinstaller
    • الطلبات

الاستخدام

ابدأ نظام CLI في المجلد الرئيسي لهذا الريبو وتشغيله التالي: 

 python getGoogleFonts.py

بعد ذلك ، ابحث عن رابط google-font القديم. يجب أن تبدو مثل هذا: 

 <html>
    <header>

    <title>My website</title>
    ...

    <link href="https://fonts.googleapis.com/css?family=Cormorant+Garamond:700,700i|Nunito+Sans:400,700,900" rel="stylesheet">

...

أدخل فقط عنوان URL نفسه في Python cli promt: 

 Please copy your Google® fonts include URL here:

https://fonts.googleapis.com/css?family=Cormorant+Garamond:700,700i|Nunito+Sans:400,700,900

بعد ذلك ، ستتمكن من الوصول إلى جميع الملفات nessarary ضمن " export "

سيتم تنزيل جميع الخطوط إلى fonts . إلى جانب ذلك ، يتم إنشاء header.html aswell باعتباره font.css -file.

يبدو font.css -file شيئًا من هذا القبيل: 

 /* CORMORANT GARAMOND | latin-ext */
/* italic-700 */
@font-face{
	font-family: 'Cormorant Garamond';
	font-style: italic;
	font-weight: 700;
	src: url('../src/fonts/Cormorant-Garamond-italic-700-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* normal-700 */
@font-face{
	font-family: 'Cormorant Garamond';
	font-style: normal;
	font-weight: 700;
	...

ماذا تفعل مع الإخراج

  1. ضع fonts التي تم إنشاؤها حديثًا في src -folder لجذر المشروع الرئيسي الخاص بك. إذا لم يكن لديك src -folder ، فما عليك سوى إنشاء واحدة جديدة. يمكنك أيضًا ضبط مسارات جميع الخطوط src -atributes في font.css -file aswell باعتبارها header.html -file.

  2. ضع font.css -file في css -folder لجذر المشروع الرئيسي الخاص بك. إذا كنت ترغب في استخدام مجلد آخر من مشروعك ، فما عليك سوى ضبط مسار السطر الأخير في header.html

  3. انسخ محتويات header.html في قسم الرأس في كل موقع تريد استخدام الخطوط عليها. يجب أن يبدو رمزك شيئًا كهذا: 

     <html>
	<header>

	<title>My website</title>
	...

	<link as="font" rel="preload" type="font/woff2" href="./src/fonts/Cormorant-Garamond-italic-700-latin-ext.woff2" crossorigin="anonymous" />
	<link as="font" rel="preload" type="font/woff2" href="./src/fonts/Cormorant-Garamond-normal-700-latin-ext.woff2" crossorigin="anonymous" />
	<link as="font" rel="preload" type="font/woff2" href="./src/fonts/Cormorant-Garamond-italic-700-latin.woff2" crossorigin="anonymous" />
	<link as="font" rel="preload" type="font/woff2" href="./src/fonts/Cormorant-Garamond-normal-700-latin.woff2" crossorigin="anonymous" />
	<link as="font" rel="preload" type="font/woff2" href="./src/fonts/Nunito-Sans-normal-400-latin-ext.woff2" crossorigin="anonymous" />
	<link as="font" rel="preload" type="font/woff2" href="./src/fonts/Nunito-Sans-normal-700-latin-ext.woff2" crossorigin="anonymous" />
	<link as="font" rel="preload" type="font/woff2" href="./src/fonts/Nunito-Sans-normal-900-latin-ext.woff2" crossorigin="anonymous" />
	<link as="font" rel="preload" type="font/woff2" href="./src/fonts/Nunito-Sans-normal-400-latin.woff2" crossorigin="anonymous" />
	<link as="font" rel="preload" type="font/woff2" href="./src/fonts/Nunito-Sans-normal-700-latin.woff2" crossorigin="anonymous" />
	<link as="font" rel="preload" type="font/woff2" href="./src/fonts/Nunito-Sans-normal-900-latin.woff2" crossorigin="anonymous" />
	<link rel="preload stylesheet" as="style" href="./css/font.css"  />
	...

خريطة الطريق

ما هو حتى الآن لتنفيذ

  • الاختيار / الكشف التلقائي ما هو المستعرض الذي يجب استخدامه للزحف
  • PROMP المستخدم لتحديد مجموعات أحرف الخط الذي سيتم تصديره. دلالة حاليا فقط اللاتينية واللاتينية ext المستخدمة beeing !!
  • مدخلات مستخدم PROMT لمسارات المشروع من ملفات الأنماط ومجلد الخطوط
يوسع
معلومات إضافية
تطبيقات ذات صلة
نوصي لك
أخبار ذات صلة الكل