HiGoogleFonts

Higooglefonts

يتيح لك HigoogleFonts إضافة منتقي Font Google لعرض قائمة بخطوط Google بسهولة. يتم استخدام هذا منتقي الخط جنبا إلى جنب مع مكوننا jQuery Select. يعرض المنتقي معاينة فورية لأسلوب الخط دون تحميل الخط.

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

الاستخدام

لاستخدام مكتبة Higooglefonts ، فقط قم بتضمين الرمز أدناه في صفحتك في 5 خطوات سهلة . تحقق من الفهرس للحصول على مثال بسيط:

الخطوة 1.

clone repo: git clone https://github.com/saadqbal/HiGoogleFonts.git

الخطوة 2.

تثبيت التبعيات: bower install

الخطوة 3.

تشمل ورقة الأنماط. أضف السطر التالي إلى رأس صفحتك:

 < link rel = "stylesheet" href = "css/fonts.css" > 

الخطوة 4.

تشمل المكتبات المطلوبة. أضف الأسطر التالية إلى رأس صفحتك بعد أوراق النمط:

 < script src = "https://code.jquery.com/jquery-1.12.0.min.js" > </ script >
 < script src = "https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.full.js" > < / script >
< script src = "https://ajax.googleapis.com/ajax/libs/webfont/1.5.18/webfont.js" > </ script >
< script src = "js/fonts.js" > </ script > 

الخطوة 5.

أضف الآن الرمز أدناه إلى الجسم لتحميل جميع الخطوط:

 < select id = "select_fontfamily" > </ select >
< p style = "font-size: 20px;" > This is the preview of the font selected < / p>


< script type = "text/javascript" >
$(document).ready(function() {

	$ ( "#select_fontfamily" ) . higooglefonts ( {			
		selectedCallback : function ( e ) {
			console . log ( e ) ;
		} ,
		loadedCallback : function ( e ) {
			console . log ( e ) ;
			$ ( "p" ) . css ( "font-family" , e ) ;
		}			
	} ) ;

  } );

</ script >

NPM و BOWER

NPM

• $ npm install higooglefonts

باور

• bower install higooglefonts

الأحداث

يوفر Higooglefonts نظام أحداث يمكن للمطورين ربطه. يمنحك إشعارات تسلسل تحميل الخط.

• selectedCallback - يتم تشغيل هذا الحدث عند تحديد خط ولكن لم يتم تحميله بعد.
• loadedCallback - يتم تشغيل هذا الحدث عند تحميل الخط وجاهز للتطبيق. هذا هو المكان الذي يجب عليك تطبيق الخط على عنصر.

تعقب الأخطاء

لديك خطأ؟ يرجى إنشاء مشكلة هنا على جيثب.

https://github.com/saadqbal/higooglefonts/issues

المؤلفون

أسد إقبال

• http://twitter.com/saadqbal
• http://github.com/saadqbal

حقوق الطبع والنشر والترخيص

حقوق الطبع والنشر 2016 Hiwaas ، Inc.

مرخصة بموجب ترخيص Apache ، الإصدار 2.0 ("الترخيص") ؛ لا يجوز لك استخدام هذا العمل إلا في الامتثال للترخيص. يمكنك الحصول على نسخة من الترخيص في ملف الترخيص ، أو في:

http://www.apache.org/licenses/license-2.0

ما لم يكن مطلوبًا بموجب القانون المعمول به أو الموافقة على الكتابة ، يتم توزيع البرامج الموزعة بموجب الترخيص على أساس "كما هي" ، دون ضمانات أو شروط من أي نوع ، إما صريحة أو ضمنية. راجع ترخيص الأذونات والقيود التي تحكم اللغة المحددة بموجب الترخيص.