fontfaceobserver下載fontfaceobserver源代碼下載

fontfaceobserver

其他源碼

1.0.0

下載

字體臉觀察者

字體臉觀察者是一個小型@font-face加載程序，並且顯示器（3.5kb縮小和1.3kb Gzpipped）與任何WebFont服務兼容。它將在加載WebFont並通知您時監視。它不會以任何方式限制您在何時，何時或如何加載WebFonts。與Web字體加載器字體FONT FACE觀察者不同，觀察者使用滾動事件來有效地檢測字體負載，並以最小的開銷來檢測。

如何使用

像往常一樣包含您的@font-face規則。字體可以由Google字體，Typekit和WebType等字體服務提供，也可以自我託管。您可以一次設置一個字體系列的監視：

 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構造函數採用兩個參數：字體家庭名稱（必需）和描述變化（可選）的對象。該對象可以包含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秒。您可以通過將多個毫秒作為第二個參數傳遞給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，則可以安裝字體face觀察者作為依賴項：

$ npm install fontfaceobserver

然後，您可以將fontfaceobserver作為commonjs（browserify）模塊：

 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 （見下文），並將其包含在項目中。它將導出一個全局的FontFaceObserver ，您可以用來創建新實例。

字體face觀察者在其API中使用承諾，因此對於不支持承諾的瀏覽器，您需要包含多填充。如果您使用自己的諾言polyfill，則只需在項目中包含fontfaceobserver.standalone.js即可。如果您沒有現有的承諾polyfill，則應使用fontfaceobserver.js ，其中包括一個小的承諾polyfill。使用Promise Polyfill將大約1.4kb（500個字節GZPEY）添加到文件大小中。