تنزيل fontfaceonload - تنزيل رمز مصدر fontfaceonload

fontfaceonload

تحميل الخط

Version 0.1.7

تنزيل

FontfaceOnload

️ ️ ️ هذا المشروع أرشفة. استخدم واجهة برمجة تطبيقات Loading Font Font CSS مباشرة بدلاً من ذلك! تحقق من web-font-loading-recipes لأمثلة.

العرض التوضيحي

الاستخدام

استخدم مع أي إعلان موجود @font-face .

 @font-face {
    font-family : My Custom Font Family;
    /* src and other properties as normal */
}

تشمل المكتبة. اتصل بـ JavaScript.

 FontFaceOnload ( "My Custom Font Family" , {
    success : function ( ) { } ,
    error : function ( ) { } ,
    timeout : 5000 // in ms. Optional, default is 10 seconds
} ) ;

استخدم مع خطوط المحتوى

للسماح لخط التراجع بأن يكون مرئيًا أثناء تحميل @font-face ، ما عليك سوى استخدام FontFaceOnload مثل:

 FontFaceOnload ( "My Custom Font Family" , {
    success : function ( ) {
        document . documentElement . className += " my-custom-font-family" ;
    }
} ) ;

ثم استخدم الفصل لتوسيط استخدامك للخط المخصص:

 body {
    font-family : sans-serif;
}
. my-custom-font-family body {
    font-family : My Custom Font Family , sans-serif;
}

إن النهج البديل الذي سيؤدي أيضًا إلى التخلص من FOIT وكذلك لا تتطلب منك تغيير CSS الخاص بك هو استخدام مكتبة loadCSS لتحميل @font-face مع كتلة مصدر بيانات URI ديناميكيًا. loadCSS أصغر من fontfaceonload . تتضمن القيود المفروضة على هذا النهج مطالبةك بإدارة التنسيق الذي يجب تحميله (Woff ، Woff2 ، TTF) ولن يعمل أيضًا مع خطوط الأيقونات (نظرًا لأنك تحتاج إلى فئة CSS لتصميم عناصر الأخوة الأخرى ، مثل النص الوصفي).

استخدم مع خطوط الرمز

لإخفاء خط الاحتياطي بحيث لا تكون أحرف الاحتياطية الغريبة غير مرئية أثناء تحميل خط الرمز ، استخدم FontFaceOnload مع خيار glyphs مثل SO:

 FontFaceOnload ( "My Custom Font Icon" , {
    success : function ( ) {
        document . documentElement . className += " my-custom-font-icon" ;
    } ,
    glyphs : "uE600uE601uE602uE605" // Optional, default is "". Useful for icon fonts: a few code points from your custom font icon.
} ) ;

ثم استخدم الفصل لتوسيط استخدامك للخط المخصص:

. icon {
    display : none;
}
. my-custom-font-family . icon {
    display : inline-block;
    font-family : My Custom Font Icon , sans-serif;
}

كيف تعمل

يستخدم هذا وحدة تحميل خط CSS عند توفرها (حاليًا في Chrome 35+ و Opera 22+). عندما لا يكون ذلك متاحًا ، فإنه يستخدم نهجًا مشابهًا جدًا مع النهج المستخدم في محمل خط الويب TypeKit (والذي يبلغ 7.1 كيلو بايت حاليًا).

في الأساس ، يقوم بإنشاء عنصر مع مكدس خط بما في ذلك خط الويب ومواقع Serif/Sans-Serif الافتراضية. ثم يستخدم سلسلة اختبار ويقيس أبعاد العنصر في فاصل زمني معين. عندما تكون الأبعاد مختلفة عن الخطوط الاحتياطية الافتراضية ، يعتبر الخط قد تم تحميله بنجاح.

إذا كنت ترغب في الحصول على polyfill الكامل لوحدة تحميل خط CSS ، اتبع مع لوادر خط Bram Stein. أعتقد أن المواصفات قد تغيرت منذ إطلاق هذا Polyfill ، لكنه يعمل على نسخة محدثة.

بناء المشروع

تشغيل هذه الأوامر:

npm install
bower install
grunt init
grunt كالمعتاد.

تكوين Grunt

بدلاً من عمل Gruntfile.js العملاق ، يستخدم هذا المشروع إعداد Grunt Modular. يحتوي كل مفتاح خيار تكوين GRUNT على ملفه الخاص الموجود في grunt/config-lib/ (تكوينات المنبع القراءة ، لا تقم بتعديلها مباشرة) أو grunt/config/ (تكوينات محددة للمشروع). يمكنك استخدام نفس المفتاح في كلا الأدلة ، يتم دمج الكائنات بذكاء باستخدام دمج Lo-dash.

للتسلسل في إعداد Gruntfile السابق ، يمكنك إضافة مفتاح آخر إلى كائن عملاق تم تمريره إلى grunt.initConfig مثل هذا: grunt.initConfig({ concat: { /* YOUR CONFIG */ } }); . في التكوين الجديد ، ستقوم بإنشاء grunt/config/concat.js مع module.exports = { /* YOUR CONFIG */ }; .