fontfaceobserver Download - تنزيل رمز fontfaceobserver

fontfaceobserver

شفرة المصدر الأخرى

1.0.0

تنزيل

خط مراقب الخط

Font Face Observer عبارة عن محمل صغير @font-face و Monitor (3.5 كيلو بايت Minized و 1.3 كيلو بايت Gzipped) متوافق مع أي خدمة WebFont. سيتم مراقبة عندما يتم تحميل WebFont وإعلامك. لا يحدك بأي شكل من الأشكال في المكان أو متى أو كيف تقوم بتحميل WebFonts. على عكس Web Font Loader Font Face Observer ، يستخدم أحداث التمرير للكشف عن أحمال الخطوط بكفاءة ومع الحد الأدنى من النفقات العامة.

كيفية استخدام

قم بتضمين قواعد @font-face الخاصة بك كالمعتاد. يمكن توفير الخطوط إما عن طريق خدمة الخط مثل Fonts Google و TypeKit و WebType أو استضافتها ذاتيًا. يمكنك إعداد مراقبة عائلة خط واحد في وقت واحد:

 var font = new FontFaceObserver ( 'My Family' , {
  weight : 400
} ) ;

font . load ( ) . then ( function ( ) {
  console . log ( 'Font is available' ) ;
} , function ( ) {
  console . log ( 'Font is not available' ) ;
} ) ;

يأخذ مُنشئ FontFaceObserver وسيطتين: اسم الأسرة الخط (المطلوبة) وكائن يصف التباين (اختياري). يمكن أن يحتوي الكائن على خصائص weight style stretch . إذا لم تكن خاصية موجودة ، فستكون افتراضيًا إلى normal . لبدء تحميل الخط ، اتصل بالطريقة load . ستعيد على الفور وعدًا جديدًا يحل عند تحميل الخط ورفضه عندما يفشل الخط في التحميل.

إذا كان الخط الخاص بك لا يحتوي على أحرف "besbwy" اللاتينية على الأقل ، فيجب عليك تمرير سلسلة اختبار مخصصة إلى طريقة load .

 var font = new FontFaceObserver ( 'My Family' ) ;

font . load ( '中国' ) . then ( function ( ) {
  console . log ( 'Font is available' ) ;
} , function ( ) {
  console . log ( 'Font is not available' ) ;
} ) ;

المهلة الافتراضية للتخلي عن تحميل الخط هو 3 ثوان. يمكنك زيادة أو تقليل هذا عن طريق تمرير عدد من المللي ثانية كمعلمة ثانية إلى طريقة load .

 var font = new FontFaceObserver ( 'My Family' ) ;

font . load ( null , 5000 ) . then ( function ( ) {
  console . log ( 'Font is available' ) ;
} , function ( ) {
  console . log ( 'Font is not available after waiting 5 seconds' ) ;
} ) ;

يمكن تحميل خطوط متعددة عن طريق إنشاء مثيل FontFaceObserver لكل منهما.

 var fontA = new FontFaceObserver ( 'Family A' ) ;
var fontB = new FontFaceObserver ( 'Family B' ) ;

fontA . load ( ) . then ( function ( ) {
  console . log ( 'Family A is available' ) ;
} ) ;

fontB . load ( ) . then ( function ( ) {
  console . log ( 'Family B is available' ) ;
} ) ;

يمكنك أيضًا تحميل كليهما في نفس الوقت ، بدلاً من تحميل كل منها بشكل فردي.

 var fontA = new FontFaceObserver ( 'Family A' ) ;
var fontB = new FontFaceObserver ( 'Family B' ) ;

Promise . all ( [ fontA . load ( ) , fontB . load ( ) ] ) . then ( function ( ) {
  console . log ( 'Family A & B have loaded' ) ;
} ) ;

إذا كنت تعمل مع عدد كبير من الخطوط ، فقد تقرر إنشاء مثيلات FontFaceObserver ديناميكيًا:

 // An example collection of font data with additional metadata,
// in this case “color.”
var exampleFontData = {
  'Family A' : { weight : 400 , color : 'red' } ,
  'Family B' : { weight : 400 , color : 'orange' } ,
  'Family C' : { weight : 900 , color : 'yellow' } ,
  // Etc.
} ;

var observers = [ ] ;

// Make one observer for each font,
// by iterating over the data we already have
Object . keys ( exampleFontData ) . forEach ( function ( family ) {
  var data = exampleFontData [ family ] ;
  var obs = new FontFaceObserver ( family , data ) ;
  observers . push ( obs . load ( ) ) ;
} ) ;

Promise . all ( observers )
  . then ( function ( fonts ) {
    fonts . forEach ( function ( font ) {
      console . log ( font . family + ' ' + font . weight + ' ' + 'loaded' ) ;

      // Map the result of the Promise back to our existing data,
      // to get the other properties we need.
      console . log ( exampleFontData [ font . family ] . color ) ;
    } ) ;
  } )
  . catch ( function ( err ) {
    console . warn ( 'Some critical font are not available:' , err ) ;
  } ) ;

المثال التالي يحاكي Fout مع Font Face Observer My Family .

 var font = new FontFaceObserver ( 'My Family' ) ;

font . load ( ) . then ( function ( ) {
  document . documentElement . className += " fonts-loaded" ;
} ) ;

. fonts-loaded {
  body {
    font-family : My Family , sans-serif;
  }
}

تثبيت

إذا كنت تستخدم NPM ، يمكنك تثبيت Font Face Observer كاعتماد:

$ npm install fontfaceobserver

يمكنك بعد ذلك طلب fontfaceobserver كوحدة شائعة (متصفح):

 var FontFaceObserver = require ( 'fontfaceobserver' ) ;

var font = new FontFaceObserver ( 'My Family' ) ;

font . load ( ) . then ( function ( ) {
  console . log ( 'My Family has loaded' ) ;
} ) ;

إذا كنت لا تستخدم NPM ، فانتقل إلى fontfaceobserver.js أو fontfaceobserver.standalone.js (انظر أدناه) وقم بتضمينه في مشروعك. ستقوم بتصدير FontFaceObserver عالمي يمكنك استخدامه لإنشاء مثيلات جديدة.

يستخدم Font Face Observer الوعود في واجهة برمجة التطبيقات الخاصة به ، لذلك بالنسبة للمتصفحات التي لا تدعم الوعود التي ستحتاجها لتضمين polyfill. إذا كنت تستخدم Promise الخاص بك polyfill ، فأنت تحتاج فقط إلى تضمين fontfaceobserver.standalone.js في مشروعك. إذا لم يكن لديك Promise Promise Polyfill ، فيجب عليك استخدام fontfaceobserver.js الذي يتضمن polyfill الوعود الصغيرة. يؤدي استخدام Promise Polyfill إلى إضافة حوالي 1.4 كيلو بايت (500 بايت Gzipped) إلى حجم الملف.