Unduh woff2base64 - Unduh Kode Sumber woff2base64

woff2base64

Pengunduhan font

1.0.0

Unduh

woff2base64

Menghasilkan font-font CSS dengan font WOFF2 dan WOFF tertanam sebagai base64.

Instalasi

 npm install --save woff2base64

Penggunaan

WOFF2BASE64 secara otomatis mencari font-weight dan font-style dalam nama file font yang diberikan (case-tidak sensitif). Semua nilai CSS yang mungkin didukung.

Jika nama file font Anda berisi kata biasa , weight font akan diatur ke normal .

Namun, jika Anda tidak dapat mengubah nama file font, Anda dapat melewati berat dan gaya untuk setiap font melalui parameter font (lihat di bawah).

 import fs from 'fs' ;
import woff2base64 from 'woff2base64' ;
const fonts = {
    'Roboto-Bold.woff2' : fs . readFileSync ( 'fonts/Roboto/Roboto-Bold.woff2' ) ,
    'Roboto-Bold.woff' :  fs . readFileSync ( 'fonts/Roboto/Roboto-Bold.woff' ) ,
	// ...
} ;
const options = {
    fontFamily : 'Roboto'
} ;
const css = woff2base64 ( fonts , options ) ;
// css.woff2 = '@font-face{font-family:"Roboto";src:url(data:application/font-woff2;charset=utf-8;base64,...'
// css.woff  = '@font-face{font-family:"Roboto";src:url(data:application/font-woff;charset=utf-8;base64,...'

fs . writeFileSync ( 'build/roboto.woff2.css' , css . woff2 ) ;
fs . writeFileSync ( 'build/roboto.woff.css' , css . woff ) ;

Parameter

Woff2Base64 menerima dua objek: fonts dan options .

font (diperlukan)

Gunakan nama file woff2 dan woff sebagai kunci.

Nilai dapat berupa String yang berisi konten file, Buffer yang berisi konten file atau Object , yang memungkinkan Anda untuk lulus opsi khusus font:

 const fonts = {
    'Roboto-BoldItalic.woff2' : {
        content : fs . readFileSync ( 'fonts/Roboto/Roboto-BoldItalic.woff2' ) ,
        weight : 'bold' ,
        style : 'italic'
    } ,
    'Roboto-Bold.woff2' : {
        content : fs . readFileSync ( 'fonts/Roboto/Roboto-Bold.woff2' ) ,
        weight : 'bold' ,
        style : 'normal'
    } ,
    'Roboto-Regular.woff2' : fs . readFileSync ( 'fonts/Roboto/Roboto-Bold.woff2' ) ,
} ;

Opsi

FontFamily (wajib)

Nama keluarga font yang digunakan dalam CSS.

Ketik: String

fontfacetemplate

Templat yang digunakan untuk menghasilkan CSS. Digunakan dengan lodash's _.template.

Ketik: String

Bawaan:

 @font-face{ font-family:"<%=family%>";src:url(<%=uri%>) format("<%=format%>");font-weight:<%=weight%>;font-style:<%=style%>;}

fonturitemplate

Template yang digunakan untuk menghasilkan data yang dikodekan base64 URI. Digunakan dengan lodash's _.template.

Ketik: String

Bawaan:

 data:<%=mime%>;charset=utf-8;base64,<%=base64%>

spanduk

Sebuah spanduk yang mendapat prepended untuk membuat file CSS. Diatur ke '' untuk menonaktifkan spanduk.

Ketik: String

Sumber daya

Konversikan font TTF Anda ke Woff2 dan Woff dengan Generator Webfont Font Squirrel.
Lihat dukungan browser saat ini untuk font WOFF2 dan WOFF di canisue.com.
Mengapa Anda membutuhkan ini? Baca Better Webfont Loading dengan menggunakan LocalStorage dan memberikan dukungan WOFF2 oleh Adam Beres-Deak.
Paket ini didasarkan pada FontOptim oleh Artem Sapegin dengan perbaikan untuk pengakuan gaya font dan font-weight.