HiGoogleFonts

Higooglefonts

HigoogleFonts memungkinkan Anda untuk menambahkan pemetik google font untuk dengan mudah menampilkan daftar font google. Pemilih font ini digunakan bersama dengan plugin JQuery terpilih kami. Picker menunjukkan pratinjau instan gaya font tanpa memuat font.

Demo

Penggunaan

Untuk menggunakan perpustakaan HigoogleFonts, cukup sertakan kode di bawah ini di halaman Anda dalam 5 langkah mudah . Periksa indeks untuk contoh sederhana:

Langkah 1.

Clone Repo: git clone https://github.com/saadqbal/HiGoogleFonts.git

Langkah 2.

Instal Ketergantungan: bower install

Langkah 3.

Sertakan lembar gaya. Tambahkan baris berikut ke header halaman Anda:

 < link rel = "stylesheet" href = "css/fonts.css" > 

Langkah 4.

Sertakan perpustakaan yang diperlukan. Tambahkan baris berikut ke header halaman Anda setelah Lembar Style:

 < script src = "https://code.jquery.com/jquery-1.12.0.min.js" > </ script >
 < script src = "https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.full.js" > < / script >
< script src = "https://ajax.googleapis.com/ajax/libs/webfont/1.5.18/webfont.js" > </ script >
< script src = "js/fonts.js" > </ script > 

Langkah 5.

Sekarang tambahkan kode di bawah ini ke tubuh untuk memuat semua font:

 < select id = "select_fontfamily" > </ select >
< p style = "font-size: 20px;" > This is the preview of the font selected < / p>


< script type = "text/javascript" >
$(document).ready(function() {

	$ ( "#select_fontfamily" ) . higooglefonts ( {			
		selectedCallback : function ( e ) {
			console . log ( e ) ;
		} ,
		loadedCallback : function ( e ) {
			console . log ( e ) ;
			$ ( "p" ) . css ( "font-family" , e ) ;
		}			
	} ) ;

  } );

</ script >

NPM dan Bower

NPM

• $ npm install higooglefonts

punjung

• bower install higooglefonts

Acara

Higooglefonts menyediakan sistem acara yang dapat dihubungkan oleh pengembang. Ini memberi Anda pemberitahuan tentang urutan pemuatan font.

• selectedCallback - Acara ini dipicu ketika font dipilih tetapi belum dimuat.
• loadedCallback - Acara ini dipicu ketika font dimuat dan siap diterapkan. Di sinilah Anda harus menerapkan font ke suatu elemen.

Pelacak bug

Punya bug? Harap buat masalah di sini di GitHub.

https://github.com/saadqbal/higooglefonts/issues

Penulis

Asad Iqbal

• http://twitter.com/saadqbal
• http://github.com/saadqbal

Hak Cipta dan Lisensi

Hak Cipta 2016 Hiwaas, Inc.

Berlisensi di bawah lisensi Apache, versi 2.0 ("lisensi"); Anda tidak boleh menggunakan pekerjaan ini kecuali sesuai dengan lisensi. Anda dapat memperoleh salinan lisensi dalam file lisensi, atau di:

http://www.apache.org/licenses/license-2.0

Kecuali diharuskan oleh hukum yang berlaku atau disepakati secara tertulis, perangkat lunak yang didistribusikan di bawah lisensi didistribusikan berdasarkan "sebagaimana adanya", tanpa jaminan atau ketentuan dalam bentuk apa pun, baik tersurat maupun tersirat. Lihat lisensi untuk bahasa spesifik yang mengatur izin dan batasan di bawah lisensi.