HiGoogleFonts
1.0.0
HigoogleFonts를 사용하면 Google 글꼴을 추가하여 Google 글꼴 목록을 쉽게 표시 할 수 있습니다. 이 글꼴 선택기는 선택된 jQuery 플러그인과 함께 사용됩니다. 피커는 글꼴을로드하지 않고 글꼴 스타일의 즉각적인 미리보기를 보여줍니다.
HigoogleFonts 라이브러리를 사용하려면 5 개의 쉬운 단계 로 페이지에 아래 코드를 포함 시키십시오. 간단한 예는 인덱스를 확인하십시오.
클론 repo : git clone https://github.com/saadqbal/HiGoogleFonts.git
의존성 설치 : bower install
스타일 시트를 포함하십시오. 페이지 헤더에 다음 줄을 추가하십시오.
< link rel = "stylesheet" href = "css/fonts.css" > 필요한 라이브러리를 포함하십시오. 스타일 시트 후 페이지 헤더에 다음 줄을 추가하십시오.
< 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 > 이제 모든 글꼴을로드하려면 아래 코드를 본체에 추가하십시오.
< 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 install higooglefonts나무 그늘
bower install higooglefontsHigoogleFonts는 개발자가 연결할 수있는 이벤트 시스템을 제공합니다. 글꼴 로딩 시퀀스에 대한 알림을 제공합니다.
selectedCallback 글꼴이 선택되었지만 아직로드되지 않은 경우이 이벤트가 트리거됩니다.loadedCallback 이 이벤트는 글꼴이로드되어 적용 할 준비가되면 트리거됩니다. 이곳은 요소에 글꼴을 적용해야합니다. 버그가 있습니까? GitHub에서 여기에 문제를 만들어주세요.
https://github.com/saadqbal/higooglefonts/issues
아사드 IQBAL
Copyright 2016 Hiwaas, Inc.
Apache 라이센스, 버전 2.0 ( "라이센스")에 따라 라이센스가 부여되었습니다. 라이센스를 준수하는 것 외에는이 작업을 사용할 수 없습니다. 라이센스 파일에서 라이센스 사본을 얻을 수 있습니다.
http://www.apache.org/licenses/license-2.0
해당 법률에 의해 요구되거나 서면에 동의하지 않는 한, 라이센스에 따라 배포 된 소프트웨어는 명시 적 또는 묵시적 보증 또는 조건없이 "그대로"기준으로 배포됩니다. 라이센스에 따른 특정 언어 통치 권한 및 제한 사항에 대한 라이센스를 참조하십시오.
