HiGoogleFonts下載HiGoogleFonts源代碼下載

HiGoogleFonts

字體下載

1.0.0

下載

Higooglefonts

HigoogleFonts允許您添加Google字體選擇器，以輕鬆顯示Google字體的列表。此字體選擇器與我們的精選jQuery插件一起使用。選擇器即時顯示了字體樣式的即時預覽，而無需加載字體。

演示

用法

要使用HigoogleFonts庫，只需在頁面中以5個簡單的步驟將下面的代碼包含在您的頁面中。檢查索引以獲取一個簡單的示例：

步驟1。

克隆回購： git clone https://github.com/saadqbal/HiGoogleFonts.git

步驟2。

安裝依賴項： bower install

步驟3。

包括樣式表。將以下行添加到您的頁面標題中：

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

步驟4。

包括所需的庫。在樣式表之後，將以下行添加到頁面標頭中：

 < 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 >

步驟5。

現在，將下面的代碼添加到身體中以加載所有字體：

 < 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 >