HiGoogleFonts

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 >

NPM和鲍尔

NPM

• $ npm install higooglefonts

鲍尔

• bower install higooglefonts

事件

HigoogleFonts提供了一个事件系统，开发人员可以将其连接到其中。它为您通知字体加载序列。

• selectedCallback选择字体但尚未加载时，会触发此事件。
• loadedCallback加载字体并准备应用时，将触发此事件。这是您应该将字体应用于元素的地方。

错误跟踪器

有错误吗？请在Github上创建一个问题。

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

作者

阿萨德·伊克巴尔

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

版权和许可

版权所有2016 Hiwaas，Inc。

根据Apache许可证（版本2.0（“许可”）获得许可；除了符合许可外，您不得使用此工作。您可以在许可证文件中获得许可证的副本，也可以在：

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

除非适用法律要求或以书面形式同意，否则根据许可证分配的软件是按照“原样”分发的，没有任何明示或暗示的任何形式的保证或条件。请参阅许可证，以获取执行许可条款和限制的特定语言。