HiGoogleFonts

Higooglefonts

HigoogleFonts le permite agregar un selector de fuentes de Google para mostrar fácilmente una lista de Google Fonts. Este selector de fuentes se usa junto con nuestro complemento JQuery Select. El selector muestra una vista previa instantánea del estilo de fuente sin cargar la fuente.

Manifestación

Uso

Para usar la biblioteca HigoogleFonts, solo incluya el código a continuación en su página en 5 sencillos pasos . Verifique el índice para obtener un ejemplo simple:

Paso 1.

Repo de clones: git clone https://github.com/saadqbal/HiGoogleFonts.git

Paso 2.

Dependencias de instalación: bower install

Paso 3.

Incluya la hoja de estilo. Agregue la siguiente línea al encabezado de su página:

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

Paso 4.

Incluya las bibliotecas requeridas. Agregue las siguientes líneas en las hojas de estilo de encabezado de su página:

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

Paso 5.

Ahora agregue el código a continuación al cuerpo para cargar todas las fuentes:

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

npm

• $ npm install higooglefonts

cenador

• bower install higooglefonts

Eventos

HigoogleFonts proporciona un sistema de eventos en el que los desarrolladores pueden conectarse. Le da notificaciones de la secuencia de carga de fuente.

• selectedCallback : este evento se activa cuando se selecciona una fuente pero aún no se carga.
• loadedCallback : este evento se activa cuando la fuente está cargada y está lista para aplicarse. Aquí es donde debe aplicar la fuente a un elemento.

Rastreador de errores

¿Tienes un error? Cree un problema aquí en GitHub.

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

Autores

Asad Iqbal

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

Derechos de autor y licencia

Copyright 2016 HIWAAS, Inc.

Licenciado bajo la licencia Apache, versión 2.0 (la "licencia"); No puede usar este trabajo, excepto de conformidad con la licencia. Puede obtener una copia de la licencia en el archivo de licencia o en:

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

A menos que la ley aplicable sea requerida o acordado por escrito, el software distribuido bajo la licencia se distribuye de manera "como es", sin garantías ni condiciones de ningún tipo, ya sea expresas o implícitas. Consulte la licencia para los permisos y limitaciones de rigor de idioma específico bajo la licencia.