网络字体加载完成后获得通知

在网页中使用自定义的字体一般通过下面的代码

@font-face {
  font-family: 'myfont';
  src: url('font/MahjongTile/MahjongTile.eot');
  /* IE9 Compat Modes */
  src: url('font/MahjongTile/MahjongTile.eot?#iefix') format('embedded-opentype'),
  /* IE6-IE8 */
  url('font/MahjongTile/MahjongTile.woff2') format('woff2'),
  /* Super Modern Browsers */
  url('font/MahjongTile/MahjongTile.woff') format('woff'),
  /* Pretty Modern Browsers */
  url('font/MahjongTile/MahjongTile.ttf') format('truetype'),
  /* Safari, Android, iOS */
  url('font/MahjongTile/MahjongTile.svg#svgFontName') format('svg');
  /* Legacy iOS */
}

在实际环境中我们经常会遇到一个现象。当页面的DOM加载完成后，由于字体文件尚未加载完毕。这时使用自定义字体的文字浏览器会使用缺省的字体显示出来，当字体文件加载完成后会自动刷新字体。这会使得页面上的字体有明显的跳动变化。

为了避免这种效果，我们希望判断如果字体文件加载完成才绘制响应的DOM，否则页面不显示内容或绘制一个加载状态。那么关键是代码如何知道字体已经加载完毕了呢？

方法一、 FontFaceSet

“CSS Font Loading Module Level 3”规范中定义了一组接口用来管理字体。
直接上代码吧：

fontWatcher=new Promise((resolve)=>{
  document.fonts.onloadingdone=(event) => {
    event.target.forEach((font) => {
      if (font.family === 'myfont' && font.status === 'loaded') {
        resolve(font);
      }
    });
  };
});

fontWatcher.then((font)=>{
  console.log(`${font.family}字体加载完毕`);
});

字体宽度比较

对于尚不支持此规范的浏览器，我们的思路是，给同样的文字分别赋予缺省字体和自定义字体。如果宽度一致我们认为自定义字体尚未加载完成，如果不一致则认为加载完成了。这一思路是学习了Google的“webfontloader”总结出来的。

const fn_fontWatch=(fontFamily)=>{
  const fn_gen_span_with_font=(font)=>{
    const span=document.createElement('span');
span.style.cssText=`display:block;position:absolute;top:-9999px;left:-9999px;
font-size:300px;width:auto;height:auto;line-height:normal;margin:0;
padding:0;font-variant:normal;white-space:nowrap;font-family:${font}`;
    span.innerHTML='BESbswy';
    document.body.append(span);
    return span;
  };
  const font_serif=['serif','sans_serif']
  const default_width=[];
  const font_span=[];
  font_serif.forEach((font)=>{
    const span_default=fn_gen_span_with_font(font);
    default_width.push(span_default.offsetWidth);
    document.body.removeChild(span_default);
    const span_font=fn_gen_span_with_font(`${fontFamily},${font}`);
    font_span.push(span_font);
  });
  return new Promise((resolve)=>{
    const fn_check=()=>{
      let ret=false;
      for(let i=0;i<font_serif.length;i++){
        ret=ret || default_width[i]!==font_span[i].offsetWidth;
      };
      return ret;
    };
    const fn_check_loop=()=>{
      if(fn_check()){
        font_span.forEach((span)=>{
          document.body.removeChild(span);
        });
        resolve(fontFamily);
      }else{
        window.setTimeout(fn_check_loop,10);
      }
    };
    fn_check_loop();
  });
};

fontWatcher=fn_fontWatch('myfont');
fontWatcher.then((font)=>{
  console.log(`${font.family}字体加载完毕`);
});