fontfaceobserverダウンロードfontfaceobserverソースコードのダウンロード

fontfaceobserver

その他のソースコード

1.0.0

ダウンロード

フォントフェイスオブザーバー

フォントフェイスオブザーバーは、任意のWebFontサービスと互換性のある小さな@font-faceローダーとモニター（3.5kbのマイニングと1.3kb Gzipt）です。 WebFontがロードされたときに監視し、通知します。 WebFontsをどこで、いつ、どのようにロードするかは、どのような方法でも制限されません。 Webフォントローダーとは異なり、FaceServerはスクロールイベントを使用して、フォントの負荷を効率的かつ最小オーバーヘッドで検出します。

使い方

いつものように@font-faceルールを含めてください。フォントは、Googleフォント、TypeKit、WebTypeなどのフォントサービスによって提供されるか、自己ホストされることができます。一度に1つのフォントファミリの監視をセットアップできます。

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

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

FontFaceObserverコンストラクターは、フォントファミリー名（必須）とバリエーション（オプション）を記述するオブジェクトの2つの引数を取ります。オブジェクトには、 weight 、 style 、 stretchプロパティを含めることができます。プロパティが存在しない場合、デフォルトはnormalになります。フォントのロードを開始するには、 loadメソッドを呼び出します。フォントがロードされて拒否されたときに解決する新しい約束をすぐに返します。フォントがロードに失敗したときに拒否されます。

フォントに少なくともラテン語の「besbwy」文字が含まれていない場合は、カスタムテスト文字列をloadメソッドに渡す必要があります。

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

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

フォントの読み込みをあきらめるためのデフォルトのタイムアウトは3秒です。 2番目のパラメーターとして数ミリ秒を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' ) ;
} ) ;

それぞれにFontFaceObserverインスタンスを作成することにより、複数のフォントをロードできます。

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

また、それぞれを個別にロードするのではなく、両方を同時にロードすることもできます。

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

多数のフォントを使用している場合は、 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 ) ;
  } ) ;

次の例ではMy Familyためにフォントフェイスオブザーバーを使用したFOUTをエミュレートします。

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

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

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

インストール

NPMを使用している場合は、依存関係としてフォントフェイスオブザーバーをインストールできます。

$ npm install fontfaceobserver

その後、commonjs（browserify）モジュールとしてfontfaceobserverを要求できます。

 var FontFaceObserver = require ( 'fontfaceobserver' ) ;

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

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

npmを使用していない場合は、 fontfaceobserver.jsまたはfontfaceobserver.standalone.js （以下を参照）をGrabを作成し、プロジェクトに含めてください。新しいインスタンスを作成するために使用できるグローバルFontFaceObserverをエクスポートします。

Font Face ObserverはAPIで約束を使用しているため、約束をサポートしていないブラウザーの場合、ポリフィルを含める必要があります。独自のPromise Polyfillを使用する場合は、プロジェクトにfontfaceobserver.standalone.jsを含める必要があります。既存のPromise Polyfillがない場合は、小さな約束ポリフィルを含むfontfaceobserver.js使用する必要があります。 Promise PolyFillを使用すると、ファイルサイズに約1.4kb（500バイトGzip）が追加されます。