fontfaceobserver -Download - fontfaceobserver Quellcode herunterladen

fontfaceobserver

Anderer Quellcode

1.0.0

Herunterladen

Schriftgesichtsbeobachter

Font Face Observer ist ein kleiner @font-face Loader und -Anmonitor (3,5 KB Minified und 1,3 KB Gziped), der mit jedem WebFont-Dienst kompatibel ist. Es wird überwacht, wenn eine Webfont geladen wird und Sie benachrichtigt. Es begrenzt Sie in keiner Weise in der Stelle, wann oder wie Sie Ihre Webfonts laden. Im Gegensatz zum Web -Schriftlader -Schriftart -Gesichtsbeobachter erkennen Scroll -Ereignisse effizient und mit minimalem Overhead.

Wie man benutzt

Geben Sie Ihre @font-face -Regeln wie gewohnt an. Schriftarten können entweder durch einen Schriftart Service wie Google-Schriftarten, Typkit und WebType oder selbst gehostet werden. Sie können eine Überwachung für eine einzelne Schriftfamilie gleichzeitig einrichten:

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

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

Der FontFaceObserver Konstruktor nimmt zwei Argumente ein: den Namen der Schriftfamilie (erforderlich) und ein Objekt, das die Variation beschreibt (optional). Das Objekt kann weight , style und stretch enthalten. Wenn eine Eigenschaft nicht vorhanden ist, wird sie standardmäßig normal sein. Um die Schriftart zu laden, rufen Sie die load auf. Es wird sofort ein neues Versprechen zurückgeben, das sich auflöst, wenn die Schriftart geladen und abgelehnt wird, wenn die Schrift nicht geladen wird.

Wenn Ihre Schriftart nicht mindestens die lateinischen "Besbwy" -Pritte enthält, müssen Sie eine benutzerdefinierte Testzeichenfolge an die load übergeben.

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

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

Die Standardzeit für das Aufgeben des Schriftladens beträgt 3 Sekunden. Sie können dies erhöhen oder verringern, indem Sie eine Reihe von Millisekunden als zweiter Parameter an die load übergeben.

 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' ) ;
} ) ;

Mehrere Schriftarten können geladen werden, indem für jeweils eine FontFaceObserver -Instanz erstellt wird.

 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' ) ;
} ) ;

Sie können auch beide gleichzeitig laden, anstatt jeden einzeln zu laden.

 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' ) ;
} ) ;

Wenn Sie mit einer großen Anzahl von Schriftarten arbeiten, können Sie sich dynamisch entscheiden, FontFaceObserver -Instanzen zu erstellen:

 // 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 ) ;
  } ) ;

Das folgende Beispiel emuliert Fout mit Schriftgesichtsbeobachter für 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

Wenn Sie NPM verwenden, können Sie Schriftfaktorbeobachter als Abhängigkeit installieren:

$ npm install fontfaceobserver

Sie können dann fontfaceobserver als CommonJS (Browserify) -Modul benötigen:

 var FontFaceObserver = require ( 'fontfaceobserver' ) ;

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

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

Wenn Sie NPM nicht verwenden, schnappen Sie sich fontfaceobserver.js oder fontfaceobserver.standalone.js (siehe unten) und fügen Sie es in Ihr Projekt ein. Es wird einen globalen FontFaceObserver exportieren, mit dem Sie neue Instanzen erstellen können.

Font Face Observer verwendet Versprechungen in seiner API. Daher müssen Sie für Browser, die keine Versprechen unterstützen, eine Polyfüllung einbeziehen. Wenn Sie Ihr eigenes Versprechen -Polyfill verwenden, müssen Sie nur fontfaceobserver.standalone.js in Ihr Projekt aufnehmen. Wenn Sie kein vorhandenes Versprechen -Polyfill haben, sollten Sie fontfaceobserver.js verwenden, das eine kleine Versprechen -Polyfill enthält. Die Verwendung des Versprechens fügt der Dateigröße ungefähr 1,4 KB (500 Bytes gziped) hinzu.