fontselector

Pemilih font

Font Selector adalah pemilih font yang mudah digunakan yang menggantikan elemen pilih asli Anda dengan dropdown yang memiliki fungsionalitas pratinjau font .

Anda dapat menjadi tuan rumah font di mana pun Anda suka. Pemilih Font tidak digabungkan ke Google Fonts. Jadi Anda tidak akan memiliki masalah tentang GDPR.

Pemilih Font ditulis dalam SCSS dan TypeScript yang diketik secara ketat.

Lihat demo : http://fontselector.cilb.de

Memulai

Buat elemen pilih Anda seperti yang Anda terbiasa. Tambahkan URL font sebagai atribut data untuk setiap opsi:

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

Harap Pikirkan: Jika Anda menyimpan URL di beberapa host yang berbeda dari host situs web Anda, header CORS perlu diatur dengan benar.

Sekarang tambahkan CSS ke kepala html Anda ...

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

... dan tambahkan kode JavaScript di bagian bawah tubuh Anda:

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

Itu saja!

Opsi

Anda dapat meneruskan objek opsi ke argumen kedua dari konstruktor fontselector untuk mengubah nama kelas atau mendengarkan peristiwa:

• WrapperClassName: String
• DropDownClassName: String
• DropDownSelectedFontClassName: String
• DropDownSelectedFontNeTClassName: String
• DropDownFontListClassName: String
• isExpandedClassName: String
• Onexpanded: Fungsi
• Terpilih: Fungsi
• Oncollapsed: Fungsi

Membangun

• Jalankan npm install untuk menginstal dependensi
• Jalankan npm run dev untuk membangun JS dan CSS dalam mode pengembangan sekali
• Jalankan npm run watch untuk membangun JS dan CSS dalam mode pengembangan setiap kali file sumber telah diubah
• Jalankan npm run build untuk membangun JS dan CSS dalam mode produksi (Minified)