HiGoogleFonts

higooglefonts

higooglefontsを使用すると、Googleフォントピッカーを追加して、Googleフォントのリストを簡単に表示できます。このフォントピッカーは、Select 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 >

NPMとBOWER

npm

• $ npm install higooglefonts

bower

• bower install higooglefonts

イベント

Higooglefontsは、開発者がフックできるイベントシステムを提供します。フォントロードシーケンスの通知を提供します。

• selectedCallbackこのイベントは、フォントが選択されているがまだロードされていないときにトリガーされます。
• loadedCallbackこのイベントは、フォントがロードされ、適用される準備ができたときにトリガーされます。ここで、フォントを要素に適用する必要があります。

バグトラッカー

バグがありますか？ Githubで問題を作成してください。

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

著者

アサド・イクバル

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

著作権とライセンス

Copyright 2016 Hiwaas、Inc。

Apacheライセンス、バージョン2.0（「ライセンス」）に基づいてライセンスされています。ライセンスに準拠している場合を除き、この作業を使用することはできません。ライセンスファイルまたはでライセンスのコピーを取得できます。

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

適用法で要求されていないか、書面で合意されていない限り、ライセンスに基づいて配布されたソフトウェアは、明示または黙示のいずれかの保証または条件なしに、「現状のまま」に基づいて配布されます。ライセンスに基づく権限と制限を管理する特定の言語のライセンスを参照してください。