fylgja fontface
v2.1
Mixin Fylgja Font-Font Mixin يجعل من السهل تحميل الخطوط.
ستقوم بتعيين جميع الإعدادات المطلوبة لوجه جيد تلقائيًا. التي لا تزال قابلة للتكوين إذا لزم الأمر.
npm i -D @fylgja/fontfaceقم بتضمين حزمة Font-Face في الكود الخاص بك عبر ؛
قم بتضمين حزمة Utilkit في الكود الخاص بك عبر ؛
@import " @fylgja/fontface " ; // (DartSass, LibSass 3.6)
@import " @fylgja/fontface/index " ; // old wayلتحميل خط. استدعاء الخط المليء بالوجه. أضف اسم الخط + لاحقة الخط.
سيتم إنشاء جميع الخطوات الأخرى بواسطة Mixin تلقائيًا ، (انظر التكوين).
مدخل:
@include font-face ( " Roboto " , " Bold Italic " );الإخراج:
@font-face {
font-family : "Roboto" ;
src :
local ( "Roboto Bold Italic" ) ,
local ( "Roboto-BoldItalic" ) ,
url ( "../fonts/Roboto-BoldItalic.woff2" ) format ( "woff2" ) ,
url ( "../fonts/Roboto-BoldItalic.woff" ) format ( "woff" );
unicode-range : "U+0000—00FF" ;
font-weight : 700 ;
font-style : italic;
font-display : swap;
}لا يوجد تكوين حقيقي باستثناء خيارات Mixin التي يمكنك تمريرها لكل خط.
يتم ملء معظم الخيارات. إذا تركت إلى قيمتها الافتراضية.
لهذا السبب ، من الأفضل استدعاء خيار محدد. بدلاً من ذلك تغيير خيارات Mixin كاملة. حتى تصل إلى الخيار الذي تحتاج إلى تغييره.
أمثلة ؛
طريقة سيئة:
@include font-face ( " Roboto " , " Regular " , 400 , " U+0-10FFFF " , " ../assets " );طريقة جيدة:
@include font-face ( " Roboto " , " Regular " , $path : " ../assets " );| خيارات | القيمة الافتراضية | وصف |
|---|---|---|
$name | اسم عائلة الخط | |
$suffix | باطل | لاحقة (مثل العادية أو الجريئة) |
$styles | لاحقة $ | أنماط (مثل 700i أو 700 مائل) |
$unicode | $ u-latin | نطاق Unicode من وجه الخط. |
$path | "../fonts" | المسار إلى ملف الخط |
$file-name | باطل | اسم ملف الخط |
$formats | محلي ، Woff2 ، ووف | تنسيقات الملف من الوجه. |
$load | تبديل | خيار التحميل للخط |
إذا كان هناك خيار فارغ ، فسيتم ملؤه بواسطة الافتراضات الافتراضية للخط
إذا كان الخيار مفقودًا. من فضلك اترك طلب ميزة.
يمكنك تحميل مكدس خط Roboto بالكامل عبر حلقة Foreach.
$fonts-roboto : (
" Light " ,
" Light Italic " ,
" Regular " ,
" Italic " ,
" Bold "
);
@each $styles in $fonts-roboto {
@include font-face ( " Roboto " , $styles );
}يمكنك استخدام هذا mixin لتحميل مكتبات أيقونة الخط. ببساطة استدعاء mixin كما وصف أعلاه. لكن اترك حقل اللاحقة إلى قيمته الافتراضية لـ NULL .
@include font-face ( " FontAwesome " , $unicode : " U+0-10FFFF " ); أو استخدم قيمة لاحقة 'Regular'
@include font-face ( " Material Icons " , " Regular " , $unicode : " U+0-10FFFF " );سيؤدي هذا بشكل افتراضي إلى:
لا يزال يتعين عليك تعيين $unicode ، نظرًا لأن مكتبات الأيقونات لديها واحدة مختلفة عن اللاتينية فقط. الافتراضي لـ Unicode هو U+0-10FFFF وهو جميع الأحاديات.
هذا شيء صغير جاء مع النشر الأول. للأسف هذا عالق في الريبو.
لكنني لا أخطط لتغيير هذا منذ ذلك الحين ، يجب أن أؤدي إلى إهمال هذا واحد وإعادة نشر ريبو وجه جديد.
إذا كنت تخطط لاستخدام خطوط متغيرة ، فلن تحتاج إلى هذا.
هذا يجعل تحميل الخطوط أسهل ويتخلى عن القتل لوجه واحد فقط.
