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


Gatsby Omni Font Loader V2

  • طريقة بسيطة لإضافة WebFonts أو خطوط مخصصة لمشروع Gatsby
  • يمكن تمكين تحميل الخط غير المتزامن
  • يمكن تمكين مستمع تحميل الخط
  • فلاش الدعم من النص غير المتواصل (fout) معالجة الدعم





سمات

  • يدعم خطوط الويب والخطوط المستضافة ذاتيا
  • مسبقا الملفات والتوصيلات قبل عنوان URL
  • أحمال الخطوط بشكل غير متزامن لتجنب حجب
  • تم تنفيذها مع مقتطفات التحميل السريع
  • مستمع حالة التحميل لتجنب fout
  • الحجم الصغير والحد الأدنى من البصمة

ثَبَّتَ

npm install gatsby-omni-font-loader react-helmet

أو

yarn add gatsby-omni-font-loader react-helmet

إعدادات

أضف المقتطف التالي إلى مجموعة الإضافات gatsby-config.js . 

 {
  /* Include plugin */
  resolve : "gatsby-omni-font-loader" ,

  /* Plugin options */
  options : {

    /* Font loading mode */
    mode : "async" ,

    /* Enable font loading listener to handle FOUT */
    enableListener : true ,

    /* Preconnect URL-s. This example is for Google Fonts */
    preconnect : [ "https://fonts.gstatic.com" ] ,

    /* Self-hosted fonts config. Add font files and font CSS files to "static" folder */
    custom : [
      {
        /* Exact name of the font as defied in @font-face CSS rule */
        name : [ "Font Awesome 5 Brands" , "Font Awesome 5 Free" ] ,
        /* Path to the font CSS file inside the "static" folder with @font-face definition */
        file : "/fonts/fontAwesome/css/all.min.css" ,
      } ,
    ] ,

    /* Web fonts. File link should point to font CSS file. */
    web : [ {
        /* Exact name of the font as defied in @font-face CSS rule */
        name : "Staatliches" ,
        /* URL to the font CSS file with @font-face definition */
        file : "https://fonts.googleapis.com/css2?family=Staatliches" ,
      } ,
    ] ,
  } ,
}

خيارات

خيار وصف تقصير
وضع يمكن ضبطها على async (افتراضي) أو render-blocking . في وضع async ، يتم تحميل الخطوط بالطريقة المثلى ، لكن Fout مرئية. في وضع render-blocking سيحدث FOUT في حالات نادرة ، ولكن ستصبح ملفات الخطية حظرًا. غير متزامن
نِطَاق يمكن ضبطها على body (افتراضي) أو html . يضبط العنصر المستهدف لأسماء ClassNames HTML. جسم
EnableListener يعمل في وضع async . تمكين مستمع تحميل الخط للتعامل مع فلاش النص غير المتواصل. إذا تم تمكينها ، سيتم تطبيق فئات CSS على HTML بمجرد انتهاء كل خط من التحميل. خطأ شنيع
الفاصل (V1 فقط) يعمل إذا كان enableListener true . فاصل مستمع الخط (في MS). الافتراضي هو 300 مللي ثانية. الموصى به:> = 300 مللي ثانية. 300
مهلة (V1 فقط) يعمل إذا كان enableListener true . قيمة مهلة المستمع خط (في MS). الافتراضي هو 30s (30000ms). لن يتحقق المستمع بعد الآن من الخطوط المحملة بعد مهلة ، فسيظل يتم تحميل الخطوط وعرضها ، ولكن دون التعامل مع Fout. 30000
مخصص خطوط المستضافة ذاتيا. أضف ملفات الخطوط وملفات CSS للخط إلى مجلد static . صفيف {name: "Font name", file: "https://url-to-font-css.path"} الكائنات. []
الويب خطوط الويب config. يجب أن يشير ارتباط الملف إلى ملف Font CSS. صفيف {name: "Font name", file: "https://url-to-font-css.path"} الكائنات. []
preconnect عناوين URL المستخدمة ل meta preconnect. عنوان URL الأساسي حيث يتم استضافة ملفات الخط . []
التحميل المسبق عناوين URL إضافية تستخدم ل meta التحميل المسبق. يتم إنشاء التحميل المسبق لعناوين URL المتوفرة ضمن سمة file من خطوط web custom تلقائيًا. []

وضع Async مقابل وضع حظر العرض

وضع ASYNC

قم بتحميل أوراق الأنماط والملفات في وضع الأولوية المنخفضة. إذا كنت ترغب في إضافة خطوط بطريقة أداء ، تعامل مع FOUT بمفردك وتأكد من أن أوقات عرض الصفحة منخفضة ، يجب عليك استخدام وضع async .

الإيجابيات: الأداء ، يتم عرض المحتوى قبل تنزيل ملفات الخطوط
السلبيات: يجب التعامل مع fout

وضع التغلب

قم بتحميل أوراق الأنماط والملفات في وضع العالي الأول. إذا كنت ترغب في استخدام هذا المكون الإضافي كوسيلة بسيطة لإضافة خطوط إلى مشروعك كما تفعل في أي مشروع آخر ، دون أي تحسينات في الأداء ومعالجة الأداء ، يجب عليك استخدام وضع render-blocking .

الايجابيات: علامة بسيطة ، لن تحدث fout في معظم الحالات
سلبيات: يمكن أن تؤخر أوراق الأنماط وملفات الخطوط

التعامل مع FOUT مع مستمع تحميل الخط

عند تحميل الخطوط بشكل غير متزامن ، قد يحدث فلاش من النص غير المليء (FOUT) لأن الخطوط تحميل بعد لحظات بعد أن يتم عرض الصفحة إلى المستخدم.

لتجنب ذلك ، يمكننا استخدام CSS لتصميم خط الاحتياطي لمطابقة حجم الخط وارتفاع الخط وتباعد الحروف للخط الرئيسي الذي يتم تحميله.

عندما يتم enableListener: true في تكوين البرنامج المساعد في gatsby-config.js ، تتم إضافة فئات HTML إلى عنصر <body> حيث يتم تحميل الخطوط.

سيكون تنسيق اسم فئة HTML بالتنسيق التالي wf-[font-family-name] . عندما يتم تحميل جميع الخطوط wf-all يتم تطبيقها.

يمكنك استخدام Matcher Matcher Font Matcher لضبط CONFICE PROPPLACK FONT و CSS CONFIG.

فيما يلي مثال على كيف سيبدو عنصر body بعد تحميل جميع الخطوط (اعتمادًا على التكوين). 

 < body
  class =" wf-lazy-monday wf-font-awesome-5-brands wf-font-awesome-5-free wf-staatliches wf-all "
> </ body >

V2 كسر التغييرات

  • إزالتها خيارات interval timeout
  • تنسيق اسم الفئة المتغير إلى wf-[font-family-name] لتجنب خلط اتفاقيات التسمية

القضايا والمساهمات

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

المساهمات موضع ترحيب وتقدير!

المساهمون في الكود

شكرا لك على مساهمتك!

هنريك • لينارت • فرانسيس الشمبانيا • هوغو

بدعم من

شكرا لك على دعمك!

استوديو Roboto

يوسع
معلومات إضافية
تطبيقات ذات صلة
نوصي لك
أخبار ذات صلة الكل