javascript - 加载网络字体后如何收到通知

Question

Google 的 Web Fonts API 提供了一种方法来定义在字体加载完成或无法加载等情况下执行的回调函数。有没有一种方法可以使用 CSS3 web 字体实现类似的功能 (@font-face) ？

Answer 1

2015 年更新

Chrome 35+ 和 Firefox 41+ 实现了 CSS 字体加载 API(MDN，W3C)。调用 document.fonts 获取 FontFaceSet对象，它有一些有用的 API 用于检测字体的加载状态:

• check(fontSpec) - 返回给定字体列表中的所有字体是否已加载并可用。 fontSpec 使用 CSS shorthand syntax for fonts .
  例如:document.fonts.check('bold 16px Roboto');//真或假
• document.fonts.ready - 返回 Promise表示字体加载和布局操作完成。
  示例:document.fonts.ready.then(function () {/*...所有字体加载...*/});

下面是显示这些 API 的片段，加上 document.fonts.onloadingdone，它提供了有关字体的额外信息。

alert('Roboto loaded? ' + document.fonts.check('1em Roboto'));  // false

document.fonts.ready.then(function () {
  alert('All fonts in use by visible text have loaded.');
   alert('Roboto loaded? ' + document.fonts.check('1em Roboto'));  // true
});

document.fonts.onloadingdone = function (fontFaceSetEvent) {
   alert('onloadingdone we have ' + fontFaceSetEvent.fontfaces.length + ' font faces loaded');
};

<link href='https://fonts.googleapis.com/css?family=Roboto:400,700' rel='stylesheet' type='text/css'>
<p style="font-family: Roboto">
  We need some text using the font, for the font to be loaded.
  So far one font face was loaded.
  Let's add some <strong>strong</strong> text to trigger loading the second one,
    with weight: 700.
</p>

IE 11 不支持 API。如果您需要支持 IE，请查看可用的 polyfill 或支持库:

• Web Font Loader - 由谷歌和 Adob​​e 开发
• FontFaceOnload - 更轻便，类似于 Web 字体加载器的方法
• FontLoader - 填充