fylgja fontface

Fylgja - fontface

Mixin font-font fylgja membuatnya sangat mudah untuk memuat font.

Ini akan mengatur semua pengaturan yang diperlukan untuk wajah font yang baik secara otomatis. Yang masih dapat dikonfigurasi jika diperlukan.

Daftar isi

• Instalasi
• Cara menggunakan
• Konfigurasi
• Tips
  • Lingkaran
  • Ikon
• FAQ

Instalasi

npm i -D @fylgja/fontface

Cara menggunakan

Sertakan paket font-wajah ke dalam kode Anda melalui;

Sertakan paket utilkit ke dalam kode Anda melalui;

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

Untuk memuat font. Hubungi font-face mixin. Tambahkan nama font Anda + akhiran font.

Semua langkah lain akan dibuat oleh mixin secara otomatis, (lihat config).

Input:

 @include font-face ( " Roboto " , " Bold Italic " );

Keluaran:

 @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;
}

Konfigurasi

Tidak ada konfigurasi nyata kecuali opsi mixin yang dapat Anda lewati per font.

Sebagian besar opsi diisi. Jika dibiarkan ke nilai defaultnya.

Untuk alasan ini lebih baik memanggil opsi tertentu. Alih -alih mengubah opsi mixin lengkap. Sampai Anda telah mencapai opsi yang perlu Anda ubah.

Contoh;

Cara Buruk:

 @include font-face ( " Roboto " , " Regular " , 400 , " U+0-10FFFF " , " ../assets " );

Cara yang bagus:

 @include font-face ( " Roboto " , " Regular " , $path : " ../assets " );

Opsi	Nilai default	Keterangan
$name		Nama keluarga font
$suffix	batal	Akhiran (misalnya biasa atau tebal)
$styles	$ sufiks	Gaya (mis. 700i atau 700 miring)
$unicode	$ u-latin	Kisaran unicode dari wajah font.
$path	'../fonts'	Jalur ke file font
$file-name	batal	Nama file font
$formats	Lokal, Woff2, Woff	Format file dari wajah font.
$load	menukar	Opsi memuat font

Jika suatu opsi nol itu akan diisi oleh default font-face

Jika opsi hilang. TLZ tinggalkan permintaan fitur.

Tips

Lingkaran

Anda dapat memuat seluruh tumpukan roboto font melalui loop foreach.

 $fonts-roboto : (
    " Light " ,
    " Light Italic " ,
    " Regular " ,
    " Italic " ,
    " Bold "
);

@each $styles in $fonts-roboto {
    @include font-face ( " Roboto " , $styles );
}

Ikon

Anda dapat menggunakan mixin ini untuk juga memuat pustaka ikon font. Cukup panggil mixin seperti dijelaskan di atas. Tetapi tinggalkan bidang akhiran ke nilai default null .

 @include font-face ( " FontAwesome " , $unicode : " U+0-10FFFF " );

Atau gunakan nilai akhiran 'Regular'

 @include font-face ( " Material Icons " , " Regular " , $unicode : " U+0-10FFFF " );

Ini akan ditetapkan secara default:

• Font-Weight ke 400
• gaya font ke normal

Anda masih harus mengatur $unicode , karena pustaka ikon memiliki yang berbeda dari sekadar bahasa Latin. Default untuk unicode adalah U+0-10FFFF yang semuanya unicodes.

FAQ

Mengapa namanya berbeda dari file

Ini adalah hal kecil yang datang dengan publikasi pertama. Sayangnya ini menempel pada repo.

Tetapi saya tidak berencana untuk mengubah ini sejak saat itu saya harus mencela yang satu ini dan menerbitkan ulang repo wajah baru.

Bagaimana cara menggunakan ini dengan font variabel

Jika Anda berencana untuk menggunakan font variabel, Anda tidak membutuhkan ini.

Hal ini membuat keluarga font pemuatan lebih mudah dan lebih dari membunuh hanya satu wajah font.