fontfaceonload
Version 0.1.7
web-font-loading-recipes para obter exemplos.
Use com qualquer declaração @font-face existente.
@font-face {
font-family : My Custom Font Family;
/* src and other properties as normal */
}Inclua a biblioteca. Ligue para o JavaScript.
FontFaceOnload ( "My Custom Font Family" , {
success : function ( ) { } ,
error : function ( ) { } ,
timeout : 5000 // in ms. Optional, default is 10 seconds
} ) ; Para permitir que a fonte de fallback seja visível enquanto o @font-face estiver carregando, basta usar FontFaceOnload assim:
FontFaceOnload ( "My Custom Font Family" , {
success : function ( ) {
document . documentElement . className += " my-custom-font-family" ;
}
} ) ;E então use a classe para escovar seu uso da fonte personalizada:
body {
font-family : sans-serif;
}
. my-custom-font-family body {
font-family : My Custom Font Family , sans-serif;
} Uma abordagem alternativa que também eliminará o FOIT e não exige que você altere seu CSS é usar a biblioteca loadCSS para carregar o @font-face com um bloco de origem URI de dados dinamicamente. loadCSS é menor que fontfaceonload . As limitações para essa abordagem incluem exigir que você gerencie qual formato carregar (woff, woff2, ttf) e não funcionará tão bem com fontes de ícones (já que você precisa uma classe CSS para estilizar outros elementos irmãos, como o texto descritivo).
Para ocultar a fonte de fallback para que os personagens estranhos de fallback não fiquem visíveis enquanto a fonte do ícone estiver carregando, use fontfaceonload com a opção glyphs como assim:
FontFaceOnload ( "My Custom Font Icon" , {
success : function ( ) {
document . documentElement . className += " my-custom-font-icon" ;
} ,
glyphs : "uE600uE601uE602uE605" // Optional, default is "". Useful for icon fonts: a few code points from your custom font icon.
} ) ;E então use a classe para escovar seu uso da fonte personalizada:
. icon {
display : none;
}
. my-custom-font-family . icon {
display : inline-block;
font-family : My Custom Font Icon , sans-serif;
}Isso usa o módulo de carregamento de fonte CSS, quando disponível (atualmente no Chrome 35+ e Opera 22+). Quando isso não está disponível, ele usa uma abordagem muito semelhante à usada no carregador de fontes da Web Typekit (que atualmente é de 7,1kb GZIP).
Basicamente, ele cria um elemento com uma pilha de fontes, incluindo a fonte da web e um tipo de letra serif/sans-serif padrão. Em seguida, ele usa uma sequência de teste e mede as dimensões do elemento em um determinado intervalo. Quando as dimensões são diferentes das fontes de fallback padrão, a fonte é considerada carregada com sucesso.
Se você quiser um poli -preenchimento completo para o módulo de carregamento de fonte CSS, siga junto com o carregador de fontes da Bram Stein. Acredito que a especificação mudou desde que ele lançou esse polyfill, mas ele está trabalhando em uma versão atualizada.
Execute estes comandos:
npm installbower installgrunt initgrunt normalmente. Em vez de um gigante Gruntfile.js , este projeto está usando uma configuração modular do grunhido. Cada tecla de opção de configuração do grunhido individual possui seu próprio arquivo localizado em grunt/config-lib/ (Readenly Upstream, não as modificam diretamente) ou grunt/config/ (configurações específicas do projeto). Você pode usar a mesma chave nos dois diretórios, os objetos são de maneira inteligente usando a fusão lo-dash.
Para concatenação na configuração anterior do GruntFile, você adicionaria outra chave ao objeto gigante passado para grunt.initConfig como o seguinte: grunt.initConfig({ concat: { /* YOUR CONFIG */ } }); . Na nova configuração, você criará um grunt/config/concat.js com module.exports = { /* YOUR CONFIG */ }; .
MIT Licença
