fontfaceonload
Version 0.1.7
web-font-loading-recipes pour des exemples.
Utilisez avec n'importe quelle déclaration @font-face existante.
@font-face {
font-family : My Custom Font Family;
/* src and other properties as normal */
}Incluez la bibliothèque. Appelez le javascript.
FontFaceOnload ( "My Custom Font Family" , {
success : function ( ) { } ,
error : function ( ) { } ,
timeout : 5000 // in ms. Optional, default is 10 seconds
} ) ; Pour permettre à la police de secours d'être visible pendant le chargement de la @font-face , utilisez simplement FontFaceOnload comme:
FontFaceOnload ( "My Custom Font Family" , {
success : function ( ) {
document . documentElement . className += " my-custom-font-family" ;
}
} ) ;puis utilisez la classe pour étendre votre utilisation de la police personnalisée:
body {
font-family : sans-serif;
}
. my-custom-font-family body {
font-family : My Custom Font Family , sans-serif;
} Une autre approche qui éliminera également le POIT et ne vous obligera pas à modifier votre CSS est d'utiliser la bibliothèque loadCSS pour charger le bloc @font-face avec un bloc de sources URI de données dynamiquement. loadCSS est plus petit que fontfaceonload . Les limitations de cette approche incluent vous obliger à gérer le format pour charger (Woff, Woff2, TTF) et cela ne fonctionnera pas aussi bien avec les polices d'icônes (car vous avez besoin d'une classe CSS pour styliser d'autres éléments frères, comme le texte descriptif).
Pour masquer la police de secours afin que les caractères de secours étranges ne soient pas visibles pendant que la police icône se charge, utilisez FontFaceOnload avec l'option glyphs comme ça:
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.
} ) ;puis utilisez la classe pour étendre votre utilisation de la police personnalisée:
. icon {
display : none;
}
. my-custom-font-family . icon {
display : inline-block;
font-family : My Custom Font Icon , sans-serif;
}Cela utilise le module de chargement de police CSS lorsqu'il est disponible (actuellement dans Chrome 35+ et Opera 22+). Lorsque cela n'est pas disponible, il utilise une approche très similaire à celle utilisée dans le chargeur de police Web Typekit (qui est actuellement 7,1 kb GZIP).
Fondamentalement, il crée un élément avec une pile de polices comprenant la police Web et une police de type Serif / Sans-Serif par défaut. Il utilise ensuite une chaîne de test et mesure les dimensions de l'élément à un certain intervalle. Lorsque les dimensions sont différentes des polices de secours par défaut, la police est considérée comme étant chargée avec succès.
Si vous souhaitez un polyfill complet pour le module de chargement de police CSS, suivez le chargeur de police de Bram Stein. Je crois que la spécification a changé depuis qu'il a lancé ce polyfill, mais il travaille sur une version mise à jour.
Exécutez ces commandes:
npm installbower installgrunt initgrunt comme d'habitude. Plutôt qu'un géant Gruntfile.js , ce projet utilise une configuration de grognement modulaire. Chaque clé d'option de configuration de grognement individuelle a son propre fichier situé dans grunt/config-lib/ (lecture en amont en amont, ne les modifie pas directement) ou grunt/config/ (Configs spécifiques au projet). Vous pouvez utiliser la même touche dans les deux répertoires, les objets sont intelligemment combinés à l'aide de la fusion Lo-Dash.
Pour la concaténation dans la configuration GruntFile précédente, vous ajouteriez une autre clé à l'objet géant transmis dans grunt.initConfig comme ceci: grunt.initConfig({ concat: { /* YOUR CONFIG */ } }); . Dans la nouvelle configuration, vous créerez un grunt/config/concat.js avec module.exports = { /* YOUR CONFIG */ }; .
Licence MIT
