HiGoogleFonts
1.0.0
O Higooglefonts permite que você adicione um seletor de fontes do Google para exibir facilmente uma lista de fontes do Google. Este seletor de fonte é usado junto com o nosso plug -in de jQuery selecionado. O seletor mostra uma visualização instantânea do estilo de fonte sem carregar a fonte.
Para usar a biblioteca Higooglefonts, basta incluir o código abaixo na sua página em 5 etapas fáceis . Verifique o índice para um exemplo simples:
Clone Repo: git clone https://github.com/saadqbal/HiGoogleFonts.git
Instale dependências: bower install
Inclua a folha de estilo. Adicione a seguinte linha no cabeçalho da página:
< link rel = "stylesheet" href = "css/fonts.css" > Inclua as bibliotecas necessárias. Adicione as seguintes linhas no cabeçalho da sua página após as folhas de estilo:
< 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 > Agora adicione o código abaixo ao corpo para carregar todas as fontes:
< 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 higooglefontsBower
bower install higooglefontsO Higooglefonts fornece um sistema de eventos em que os desenvolvedores podem se conectar. Ele fornece notificações da sequência de carregamento da fonte.
selectedCallback - Este evento é acionado quando uma fonte é selecionada, mas ainda não carregada.loadedCallback - Este evento é acionado quando a fonte é carregada e está pronta para ser aplicada. É aqui que você deve aplicar a fonte a um elemento. Tem um bug? Crie um problema aqui no Github.
https://github.com/saadqbal/higooglefonts/issues
Asad Iqbal
Copyright 2016 Hiwaas, Inc.
Licenciado sob a licença Apache, versão 2.0 (a "licença"); Você não pode usar este trabalho, exceto em conformidade com a licença. Você pode obter uma cópia da licença no arquivo de licença ou em:
http://www.apache.org/license/license-2.0
A menos que exigido pela lei aplicável ou acordada por escrito, o software distribuído sob a licença é distribuído "como está", sem garantias ou condições de qualquer tipo, expressa ou implícita. Consulte a licença para o idioma específico que rege as permissões e limitações sob a licença.
