fontfaceobserver Téléchargement - fontfaceobserver Code source Télécharger

fontfaceobserver

Autre code source

1.0.0

Télécharger

Observateur de la police

Font Face Observer est un petit chargeur et moniteur @font-face (3,5 Ko et 1,3 kb gzipip) compatibles avec n'importe quel service WebFont. Il surveillera quand un WebFont sera chargé et vous informera. Cela ne vous limite en aucune façon où, quand ou comment vous chargez vos webfonts. Contrairement au chargeur de police de la police de police, l'observateur utilise des événements de défilement pour détecter les charges de police efficacement et avec un minimum de frais généraux.

Comment utiliser

Incluez vos règles @font-face comme d'habitude. Les polices peuvent être fournies par un service de police telles que Google Fonts, Typekit et WebType ou être auto-hébergé. Vous pouvez configurer la surveillance d'une seule famille de polices à la fois:

 var font = new FontFaceObserver ( 'My Family' , {
  weight : 400
} ) ;

font . load ( ) . then ( function ( ) {
  console . log ( 'Font is available' ) ;
} , function ( ) {
  console . log ( 'Font is not available' ) ;
} ) ;

Le constructeur FontFaceObserver prend deux arguments: le nom de la famille (requis) et un objet décrivant la variation (facultatif). L'objet peut contenir des propriétés weight , style et stretch . Si une propriété n'est pas présente, elle sera par défaut normal . Pour commencer à charger la police, appelez la méthode load . Il renverra immédiatement une nouvelle promesse qui se résout lorsque la police est chargée et rejetée lorsque la police ne charge pas.

Si votre police ne contient pas au moins les caractères latin "Besbwy", vous devez passer une chaîne de test personnalisée à la méthode load .

 var font = new FontFaceObserver ( 'My Family' ) ;

font . load ( '中国' ) . then ( function ( ) {
  console . log ( 'Font is available' ) ;
} , function ( ) {
  console . log ( 'Font is not available' ) ;
} ) ;

Le délai d'expiration par défaut pour abandonner le chargement des polices est de 3 secondes. Vous pouvez augmenter ou diminuer cela en passant un certain nombre de millisecondes comme deuxième paramètre à la méthode load .

 var font = new FontFaceObserver ( 'My Family' ) ;

font . load ( null , 5000 ) . then ( function ( ) {
  console . log ( 'Font is available' ) ;
} , function ( ) {
  console . log ( 'Font is not available after waiting 5 seconds' ) ;
} ) ;

Plusieurs polices peuvent être chargées en créant une instance FontFaceObserver pour chacune.

 var fontA = new FontFaceObserver ( 'Family A' ) ;
var fontB = new FontFaceObserver ( 'Family B' ) ;

fontA . load ( ) . then ( function ( ) {
  console . log ( 'Family A is available' ) ;
} ) ;

fontB . load ( ) . then ( function ( ) {
  console . log ( 'Family B is available' ) ;
} ) ;

Vous pouvez également charger les deux en même temps, plutôt que de charger chacun individuellement.

 var fontA = new FontFaceObserver ( 'Family A' ) ;
var fontB = new FontFaceObserver ( 'Family B' ) ;

Promise . all ( [ fontA . load ( ) , fontB . load ( ) ] ) . then ( function ( ) {
  console . log ( 'Family A & B have loaded' ) ;
} ) ;

Si vous travaillez avec un grand nombre de polices, vous pouvez décider de créer dynamiquement FontFaceObserver .

 // An example collection of font data with additional metadata,
// in this case “color.”
var exampleFontData = {
  'Family A' : { weight : 400 , color : 'red' } ,
  'Family B' : { weight : 400 , color : 'orange' } ,
  'Family C' : { weight : 900 , color : 'yellow' } ,
  // Etc.
} ;

var observers = [ ] ;

// Make one observer for each font,
// by iterating over the data we already have
Object . keys ( exampleFontData ) . forEach ( function ( family ) {
  var data = exampleFontData [ family ] ;
  var obs = new FontFaceObserver ( family , data ) ;
  observers . push ( obs . load ( ) ) ;
} ) ;

Promise . all ( observers )
  . then ( function ( fonts ) {
    fonts . forEach ( function ( font ) {
      console . log ( font . family + ' ' + font . weight + ' ' + 'loaded' ) ;

      // Map the result of the Promise back to our existing data,
      // to get the other properties we need.
      console . log ( exampleFontData [ font . family ] . color ) ;
    } ) ;
  } )
  . catch ( function ( err ) {
    console . warn ( 'Some critical font are not available:' , err ) ;
  } ) ;

L'exemple suivant imite Fout avec Font Face Observer pour My Family .

 var font = new FontFaceObserver ( 'My Family' ) ;

font . load ( ) . then ( function ( ) {
  document . documentElement . className += " fonts-loaded" ;
} ) ;

. fonts-loaded {
  body {
    font-family : My Family , sans-serif;
  }
}

Installation

Si vous utilisez NPM, vous pouvez installer Font Face Observer comme dépendance:

$ npm install fontfaceobserver

Vous pouvez ensuite nécessiter fontfaceobserver en tant que module CommonJS (Browserify):

 var FontFaceObserver = require ( 'fontfaceobserver' ) ;

var font = new FontFaceObserver ( 'My Family' ) ;

font . load ( ) . then ( function ( ) {
  console . log ( 'My Family has loaded' ) ;
} ) ;

Si vous n'utilisez pas NPM, prenez fontfaceobserver.js ou fontfaceobserver.standalone.js (voir ci-dessous) et incluez-le dans votre projet. Il exportera un Global FontFaceObserver que vous pouvez utiliser pour créer de nouvelles instances.

Font Face Observer utilise des promesses dans son API, donc pour les navigateurs qui ne soutiennent pas les promesses, vous devrez inclure un polyfill. Si vous utilisez votre propre promesse Polyfill, vous avez juste besoin d'inclure fontfaceobserver.standalone.js dans votre projet. Si vous n'avez pas de polyfill de promesse existant, vous devez utiliser fontfaceobserver.js qui comprend une petite promesse polyfill. L'utilisation de la promesse polyfill ajoute environ 1,4 Ko (500 octets gzipip) à la taille du fichier.