当web font已经准备好时会触发执行回调函数。具有不同浏览器厂商都能兼容的写法如下所示: “`jsif{ // 检测是否支持 fonts 属性 var openSans = new FontFace; document.fonts.add; // 加载 web font openSans .load().then; } else{ alert (‘Your browser do not support this feature!

使用cdn来加速字体文件在前端的加载速度，并监听字体是否加载完成？

1. 使用开放的字体CDN

以Google Fonts为例，可在head标签中加入对应字体文件的链接就行了：

“`html

“`

2. 监听字体加载完成（FontFace API)

在使用上述方法之前，可通过FontFace API来监测Web font是否加载完成。当web font已经准备好时会触发执行回调函数。具有不同浏览器厂商都能兼容的写法如下所示:

“`js

if(“fonts”in document){ // 检测是否支持 fonts 属性 var openSans = new FontFace(‘Open Sans’, ‘url(path/to/open-sans), {}); document.fonts.add(openSans); // 加载 web font openSans .load().then(function(){ // Web font 加载完成后将要执行的代码 console .log(‘Loaded Open Sans’); }); } else{ alert (‘Your browser do not support this feature!’); } “`