JS中字体文件的加载和使用

1、加载字体文件

加载字体文件主要用到 FontFace 这个对象

// 字体加载
export function loadFont(_fontName, _fontUrl) {
  let reg = new RegExp('\\b' + _fontName + '\\b')

  let _fontFamily = document.body.style.fontFamily

  if (reg.test(_fontFamily)) {
    return
  }

  let prefont = new FontFace(
    _fontName,
    'url(' + _fontUrl + ')'
  );

  prefont.load().then(function (loaded_face) {
    console.log('字体加载成功', loaded_face)

    document.fonts.add(loaded_face);
    // document.body.style.fontFamily = (_fontFamily ? _fontFamily + ',' : _fontFamily) + _fontName;

  }).catch(function (error) {
    console.log('字体加载失败', error)
  })
}

2、使用字体

直接在对应的标签上使用 css 中的 fontFamily 赋值你定义的字体名字即可

字体