Web Font Loader 技术文档

1. 安装指南

1.1 通过 CDN 引入

你可以通过 CDN 引入 Web Font Loader，以下是使用 Google Hosted Libraries 的示例：

<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"></script>
<script>
  WebFont.load({
    google: {
      families: ['Droid Sans', 'Droid Serif']
    }
  });
</script>

1.2 异步加载

你也可以异步加载 Web Font Loader，避免阻塞页面加载：

<script>
   WebFontConfig = {
      typekit: { id: 'xxxxxx' }
   };

   (function(d) {
      var wf = d.createElement('script'), s = d.scripts[0];
      wf.src = 'https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js';
      wf.async = true;
      s.parentNode.insertBefore(wf, s);
   })(document);
</script>

1.3 通过 npm 安装

你还可以通过 npm 安装 Web Font Loader：

npm install webfontloader

然后在代码中引入：

var WebFont = require('webfontloader');

WebFont.load({
  google: {
    families: ['Droid Sans', 'Droid Serif']
  }
});

2. 项目的使用说明

2.1 基本使用

Web Font Loader 允许你通过 @font-face 加载字体，并提供统一的接口来控制字体的加载体验。你可以从 Google Fonts、Typekit、Fonts.com、Fontdeck 以及自托管的 Web 字体中加载字体。

2.2 配置选项

你可以通过 WebFontConfig 全局变量或直接传递给 WebFont.load 方法来配置字体加载。配置选项包括字体来源、事件回调、超时设置等。

2.3 事件系统

Web Font Loader 提供了一套事件系统，允许你在字体加载的不同阶段执行相应的操作。常见的事件包括 loading、active、inactive、fontloading、fontactive 和 fontinactive。

3. 项目API使用文档

3.1 事件回调

你可以通过 WebFontConfig 对象设置事件回调函数：

WebFontConfig = {
  loading: function() {
    console.log('字体加载中...');
  },
  active: function() {
    console.log('字体已渲染');
  },
  inactive: function() {
    console.log('字体加载失败');
  },
  fontloading: function(familyName, fvd) {
    console.log(`字体 ${familyName} 正在加载`);
  },
  fontactive: function(familyName, fvd) {
    console.log(`字体 ${familyName} 已渲染`);
  },
  fontinactive: function(familyName, fvd) {
    console.log(`字体 ${familyName} 加载失败`);
  }
};

3.2 超时设置

你可以通过 timeout 选项设置字体加载的超时时间：

WebFontConfig = {
  google: {
    families: ['Droid Sans']
  },
  timeout: 2000 // 设置超时时间为2秒
};

3.3 禁用事件和类

你可以通过设置 events 和 classes 参数来禁用事件回调和 CSS 类：

WebFontConfig = {
  events: false,
  classes: false
};

4. 项目安装方式

4.1 通过 CDN 安装

最简单的方式是通过 CDN 引入 Web Font Loader：

<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"></script>

4.2 通过 npm 安装

你也可以通过 npm 安装 Web Font Loader：

npm install webfontloader

然后在代码中引入：

var WebFont = require('webfontloader');

4.3 异步加载

如果你需要异步加载 Web Font Loader，可以使用以下代码：

<script>
   WebFontConfig = {
      typekit: { id: 'xxxxxx' }
   };

   (function(d) {
      var wf = d.createElement('script'), s = d.scripts[0];
      wf.src = 'https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js';
      wf.async = true;
      s.parentNode.insertBefore(wf, s);
   })(document);
</script>

通过以上方式，你可以轻松地在项目中使用 Web Font Loader 来加载和管理字体。