HiGoogleFonts

Higooglefonts

HigoogleFonts позволяет добавить сборщика шрифтов Google, чтобы легко отобразить список шрифтов Google. Этот сборщик шрифта используется вместе с нашим плагином Select JQuery. Сборщик показывает мгновенный предварительный просмотр стиля шрифта без загрузки шрифта.

Демо

Использование

Чтобы использовать библиотеку HigoogleFonts, просто включите код ниже на вашей странице в 5 простых шагах . Проверьте индекс для простого примера:

Шаг 1.

Clone Repo: 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 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

Если это не требуется применимого законодательства или не согласовано в письменной форме, программное обеспечение, распространяемое по лицензии, распределяется по основам «как есть», без каких -либо гарантий или условий, явных или подразумеваемых. См. Лицензию для конкретного языка, регулирующих разрешения и ограничения по лицензии.