HiGoogleFonts

Higooglefonts

Mit HigoogleFonts können Sie einen Google -Schriftart -Picker hinzufügen, um einfach eine Liste von Google -Schriftarten anzuzeigen. Dieser Schriftart Picker wird zusammen mit unserem Auswahl -JQuery -Plugin verwendet. Die Auswahl zeigt eine sofortige Vorschau des Schriftstils, ohne die Schriftart zu laden.

Demo

Verwendung

Um die HigoogleFonts -Bibliothek zu verwenden, geben Sie einfach den folgenden Code in Ihrer Seite in 5 einfachen Schritten ein. Überprüfen Sie den Index auf ein einfaches Beispiel:

Schritt 1.

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

Schritt 2.

Installieren Sie Abhängigkeiten: bower install

Schritt 3.

Fügen Sie das Stylesheet ein. Fügen Sie die folgende Zeile in Ihren Seitenkopf hinzu:

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

Schritt 4.

Fügen Sie die erforderlichen Bibliotheken ein. Fügen Sie die folgenden Zeilen in Ihren Seitenkopf für Style Sheets hinzu:

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

Schritt 5.

Fügen Sie nun den Code unten zum Körper hinzu, um alle Schriftarten zu laden:

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

NPM

• $ npm install higooglefonts

Laube

• bower install higooglefonts

Ereignisse

Higooglefonts bietet ein Ereignissystem, in das Entwickler zusammenhängen können. Es gibt Ihnen Benachrichtigungen über die Schriftlastsequenz.

• selectedCallback - Dieses Ereignis wird ausgelöst, wenn eine Schriftart ausgewählt, aber noch nicht geladen wird.
• loadedCallback - Dieses Ereignis wird ausgelöst, wenn die Schriftart geladen ist und zur Anwendung bereit ist. Hier sollten Sie eine Schriftart auf ein Element anwenden.

Bug Tracker

Einen Fehler haben? Bitte erstellen Sie hier ein Problem auf GitHub.

https://github.com/saadqbal/Higooglefonts/ISSUES

Autoren

Asad Iqbal

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

Urheberrecht und Lizenz

Copyright 2016 Hiwaas, Inc.

Lizenziert unter der Apache -Lizenz, Version 2.0 (der "Lizenz"); Sie dürfen diese Arbeit nur in Einklang mit der Lizenz verwenden. Sie können eine Kopie der Lizenz in der Lizenzdatei erhalten oder unter:

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

Sofern nicht nach geltendem Recht oder schriftlich zu vereinbart wird, wird die im Rahmen der Lizenz verteilte Software auf "As ist" Basis ohne Gewährleistung oder Bedingungen jeglicher Art, entweder ausdrücklich oder impliziert, verteilt. Siehe die Lizenz für die spezifischen Sprachberechtigungen und Einschränkungen im Rahmen der Lizenz.