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）添加到文件大小中。