fylgja fontface

fylgja - fontface

Mixin แบบอักษร Fylgja ทำให้ง่ายต่อการโหลดแบบอักษร

มันจะตั้งค่าการตั้งค่าที่จำเป็นทั้งหมดสำหรับหน้าอักษรที่ดีโดยอัตโนมัติ ซึ่งยังคงสามารถกำหนดค่าได้หากจำเป็น

สารบัญ

• การติดตั้ง
• วิธีใช้
• การกำหนดค่า
• เคล็ดลับ
  • วง
  • ไอคอน
• คำถามที่พบบ่อย

การติดตั้ง

npm i -D @fylgja/fontface

วิธีใช้

รวมแพ็คเกจ Font-face ไว้ในรหัสของคุณผ่าน;

รวมแพ็คเกจ Utilkit ไว้ในรหัสของคุณผ่าน;

 @import " @fylgja/fontface " ; // (DartSass, LibSass 3.6)
@import " @fylgja/fontface/index " ; // old way

เพื่อโหลดตัวอักษร โทรหา Mixin แบบอักษร เพิ่มชื่อตัวอักษร + คำต่อท้ายของแบบอักษร

ขั้นตอนอื่น ๆ ทั้งหมดจะถูกสร้างขึ้นโดย MixIn โดยอัตโนมัติ (ดู config)

ป้อนข้อมูล:

 @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, woff	รูปแบบไฟล์ของหน้าอักษร
$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 " );

สิ่งนี้จะตั้งค่าตามค่าเริ่มต้น:

• Font-weight ถึง 400
• สไตล์ตัวอักษรเป็นปกติ

คุณยังต้องตั้งค่า $unicode เนื่องจากไลบรารีไอคอนมีความแตกต่างกันมากกว่าแค่ละติน ค่าเริ่มต้นสำหรับ Unicode คือ U+0-10FFFF ซึ่งเป็น Unicodes ทั้งหมด

คำถามที่พบบ่อย

เหตุใดชื่อจึงแตกต่างจากไฟล์

นี่เป็นสิ่งเล็ก ๆ น้อย ๆ ที่มาพร้อมกับการเผยแพร่ครั้งแรก น่าเศร้าที่ติดอยู่กับ repo

แต่ฉันไม่ได้วางแผนที่จะเปลี่ยนแปลงสิ่งนี้ตั้งแต่นั้นมาฉันต้องเลิกกิจการนี้และเผยแพร่ repo แบบอักษรใหม่อีกครั้ง

ฉันจะใช้สิ่งนี้กับตัวแปรแบบอักษรได้อย่างไร

หากคุณกำลังวางแผนที่จะใช้แบบอักษรตัวแปรคุณไม่ต้องการสิ่งนี้

สิ่งนี้ทำให้การโหลดฟอนต์-ครอบครัวง่ายขึ้นและฆ่ามากกว่าหนึ่งหน้าแบบฟอนต์