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

تم الآن إهمال مشروع المحارف.

أنشأ DecliningLotus FontSource والذي يوفر نفس الوظائف مثل المحارف ولكن مع الإصدارات الآلية والدعم الأكثر ثراءً لاستيراد الأوزان أو الأنماط أو مجموعات اللغة المحددة.

للبدء في استخدام FontSource ، استبدل في الحزمة الخاصة بك.

ثم قم بتغيير الواردات من EG "استيراد" محرف-روبوتو "إلى" استيراد "@fontsource/roboto/latin.css".

ستواصل حزم المحرف العمل إلى أجل غير مسمى ، لذلك لا توجد تغييرات فورية ضرورية.

المحارف

حزم NPM لمحارف مفتوحة المصدر-مما يجعل من السهل على WebFonts استضافة ذاتيا.

https://www.bricolage.io/typefaces-eas-way-to-self-host-fonts/

لماذا

  • الاستضافة الذاتية أسرع بكثير . يضيف تحميل محرف من خطوط Google أو خدمة الخط المستضاف الأخرى طلب شبكة إضافية (حظر) . في الاختبار الخاص بي ، وجدت أن استبدال خطوط Google بخط مستضيف ذاتيًا يمكن أن يحسن SpeedIndex من الموقع بمقدار حوالي 300 ميلي ثانية على سطح المكتب و 1+ ثانية على 3G. هذه صفقة كبيرة.
  • تحميل الخطوط الخاصة بك في وضع عدم الاتصال . إنه لأمر مزعج أن تبدأ العمل على مشروع ويب على القطار أو الطائرة ورؤية الواجهة الخاصة بك مشدودة لأنه لا يمكنك الوصول إلى خطوط Google. أتذكر مرة واحدة في هذا الموقف وأبذل قصارى جهدها لتجنب إعادة تحميل مشروع لأنني كنت أعلم أنني سأفقد الخطوط وأضطر إلى التوقف عن العمل.
  • تجاوز خطوط Google . بعض المحارف المفضلة لدي ليست على خطوط Google مثل Clear Sans و Cooper Hewitt و Aleo.
  • يجب إدارة جميع تبعيات الويب (الموقع | التطبيق) من خلال NPM كلما كان ذلك ممكنًا. تيس بالطريقة الحديثة.

ماذا

تشحن كل حزمة محرف مع جميع ملفات الخطوط و CSS اللازمة لاستضافة محرف مفتوح المصدر.

تمت إضافة جميع خطوط Google بالإضافة إلى قائمة صغيرة ولكن متزايدة من الخطوط الأخرى مفتوحة المصدر. افتح مشكلة إذا كنت تريد إضافة خط!

كيف

لا يمكن أن يكون أسهل. هذه هي الطريقة التي ستضيف بها بلاات مفتوحة. 

 npm install --save typeface-open-sans

ثم في ملف إدخال التطبيق أو الموقع الخاص بك. 

 require ( "typeface-open-sans" )

وهذا كل شيء! أنت الآن تستضيف الذات بلا!

يجب أن يستغرق الأمر أقل من 5 دقائق لتبديل خطوط Google.

يفترض Typeface أنك تستخدم WebPack مع إعداد Loaders لتحميل ملفات CSS وملفات الخطوط (يمكنك استخدام محرف مع إعدادات أخرى ولكن WebPack تجعل الأمور بسيطة حقًا). على افتراض أن تكوين WebPack الخاص بك هو إعداد بشكل صحيح ، فأنت بحاجة فقط إلى طلب المحرف في ملف الإدخال لمشروعك.

العديد من الأدوات المصممة باستخدام WebPack مثل Gatsby و Create REACT هي الإعداد بالفعل للعمل مع المحارف. يدمج Gatsby افتراضيًا أيضًا CSS في <head> حتى لتحميل أسرع.

إذا كنت لا تستخدم أداة WebPack أو أداة مكافئة تتيح لك طلب CSS ، فستحتاج إلى دمج ملفات INDEX.CSS و LIP من الحزمة إلى نظام الإنشاء يدويًا.

بدائل بدون حزمة ويب

  • لمستخدمي Ember ، يوجد Addon https://github.com/jeffjewiss/member-typeface

إضافة خطوط أخرى

أسهل طريقة لمعرفة ما إذا كان المحرف المفضل لديك مدعومًا هو البحث على NPM أو في دليل الحزم في هذا الريبو.

أحب أن أرى كل خط مفتوح المصدر على NPM! افتح مشكلة إذا كان المحرف المفضل لك مفقودًا. لقد نشرت برمجياً جميع الخطوط من Google Fonts وأخطط لفعل الشيء نفسه مع الخطوط المستضافة على Fontsquirrel من خلال واجهة برمجة التطبيقات الخاصة بهم.

أفكار أخرى لاستكشافها

  • أضف نسخة محددة من كل خط.
  • في البداية ، أضفت للتو دعمًا للنسخة اللاتينية للخطوط. أحب أن أسمع أفكارًا عن كيفية دعم اللغات الأخرى. ربما require('open-sans/greek.css') ؟
  • مساعدي CSS في عودة السفينة - اكتشاف CSS الاحتياطية ليس بالأمر السهل بشكل خاص. ربما هناك طريقة لأتمتة هذا. على سبيل المثال ، إذا كنت تستخدم Typeface X في fontsize y مع Farkback Font Z ، فإليك وظيفة لإنشاء CSS الاحتياطية.
  • استكشاف تحسينات Futher لتحميل الخطوط. https://www.zachleat.com/web/comprehmuny-webfonts/ لديه قائمة طويلة. معظم يتطلب برمجة البرمجة النصية المؤلمة لكل مشروع. ماذا لو يمكن أن تكون أفضل الاستراتيجيات آلية؟
يوسع
معلومات إضافية
تطبيقات ذات صلة
نوصي لك
أخبار ذات صلة الكل