HiGoogleFonts

Higooglefonts

HigoogleFonts vous permet d'ajouter un sélecteur de polices Google pour afficher facilement une liste de polices Google. Ce sélecteur de police est utilisé avec notre plugin JQuery Select. Le sélecteur montre un aperçu instantané du style de police sans charger la police.

Démo

Usage

Pour utiliser la bibliothèque HigoogleFontts, incluez simplement le code ci-dessous dans votre page en 5 étapes faciles . Vérifiez l'index pour un exemple simple:

Étape 1.

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

Étape 2.

Installer les dépendances: bower install

Étape 3.

Incluez la feuille de style. Ajoutez la ligne suivante dans l'en-tête de votre page:

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

Étape 4.

Inclure les bibliothèques requises. Ajoutez les lignes suivantes dans l'en-tête de votre page après les feuilles de 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 > 

Étape 5.

Ajoutez maintenant le code ci-dessous au corps pour charger toutes les polices:

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

NPM

• $ npm install higooglefonts

tonnelle

• bower install higooglefonts

Événements

HigoogleFonts fournit un système d'événements auxquels les développeurs peuvent se connecter. Il vous donne des notifications de la séquence de chargement des polices.

• selectedCallback - Cet événement est déclenché lorsqu'une police est sélectionnée mais pas encore chargée.
• loadedCallback - Cet événement est déclenché lorsque la police est chargée et est prête à être appliquée. C'est là que vous devez appliquer une police à un élément.

Tracker de bug

Vous avez un bug? Veuillez créer un problème ici sur GitHub.

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

Auteurs

Asad Iqbal

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

Copyright et licence

Copyright 2016 Hiwaas, Inc.

Licencié sous la licence Apache, version 2.0 (la "licence"); Vous ne pouvez pas utiliser ce travail, sauf conforme à la licence. Vous pouvez obtenir une copie de la licence dans le fichier de licence, ou à:

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

Sauf exiger la loi applicable ou convenu par écrit, les logiciels distribués en vertu de la licence sont distribués sur une base «tel quel», sans garantie ou conditions d'aucune sorte, expresse ou implicite. Voir la licence pour la langue spécifique régissant les autorisations et les limitations sous la licence.