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

محدد الخط

يعد محدد FONT أمرًا بسيطًا لاستخدام منتقي الخط الذي يحل محل عنصر SELECT الأصلي مع منسدلة لها وظائف معاينة الخط .

يمكنك استضافة الخطوط أينما تريد. لا يقترن محدد الخطوط بخطوط Google. لذلك لن يكون لديك أي مشاكل تتعلق بالناتج المحلي الإجمالي.

يتم كتابة محدد الخط في SCSS و TypeScript المكتوبة بدقة.

انظر العرض التوضيحي : http://fontselector.cilb.de

ابدء

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

 < select id =" my-font-select " >
    < option value =" Open Sans " data-font-url =" ./fonts/OpenSans-Regular.ttf " > Open Sans </ option >
</ select >

يرجى العقل: إذا قمت بتخزين عناوين URL على مضيف مختلف عن مضيف موقع الويب الخاص بك ، فيجب ضبط رؤوس CORS بشكل صحيح.

أضف الآن CSS إلى رأس HTML الخاص بك ... 

 < head >
    < link rel =" stylesheet " type =" text/css " href =" font-selector/styles.css " />
</ head >

... وأضف رمز JavaScript في أسفل جسمك: 

 < script type =" text/javascript " >
    new FontSelector ( '#my-font-select' ) ;
</ script >

هذا كل شيء!

خيارات

يمكنك تمرير كائن خيارات إلى الوسيطة الثانية من مُنشئ Fontselector لتغيير أسماء الفصول الدراسية أو الاستماع إلى الأحداث:

  • WrapperClassName: سلسلة
  • REPDOWNCLASTNAME: سلسلة
  • DropDownectedFontClassName: سلسلة
  • DropDownectedFontnameClassName: String
  • DropDownFontListClassName: سلسلة
  • IsexpandedClassName: سلسلة
  • Onexpanded: وظيفة
  • onselected: وظيفة
  • oncollapsed: وظيفة

يبني

  • قم بتشغيل npm install لتثبيت التبعيات
  • تشغيل npm run dev لبناء JS و CSS في وضع التطوير مرة واحدة
  • تشغيل npm run watch لإنشاء JS و CSS في وضع التطوير في كل مرة يتم فيها تغيير ملف مصدر
  • تشغيل npm run build لبناء JS و CSS في وضع الإنتاج (MINISED)
يوسع
معلومات إضافية
تطبيقات ذات صلة
نوصي لك
أخبار ذات صلة الكل