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

不怕麻烦的鹿丸

已于 2023-09-28 17:17:54 修改

阅读量2.3k

点赞数 2

分类专栏： JavaScript HTML5 CSS 文章标签： javascript 前端开发语言

于 2023-09-15 17:06:55 首次发布

本文链接：https://blog.csdn.net/qq_31851435/article/details/132907933

版权

JavaScript 同时被 3 个专栏收录

38 篇文章

订阅专栏

HTML5

38 篇文章

订阅专栏

CSS

4 篇文章

订阅专栏

本文介绍了如何在JavaScript中使用FontFace对象加载自定义字体，包括loadFont函数加载字体文件和checkFont函数检测字体是否已加载，以及如何在HTML中通过CSS直接应用加载的字体。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、加载字体文件

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

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

  // let _fontFamily = document.body.style.fontFamily

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

  if(checkFont(_fontName)) {
    console.log('已有字体：', _fontName)
    return
  }

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

  prefont.load().then(function (loaded_face) {

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

    console.log('字体加载成功', loaded_face, document.fonts)

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

检测字体文件是否已加载

// 检测字体文件是否已加载
function checkFont(name){
  let values = document.fonts.values();
  let isHave=false;
  let item = values.next();
  while(!item.done&&!isHave)
  {
      let fontFace=item.value;
      if(fontFace.family==name)
      {
          isHave=true;
      }
      item=values.next();
  }
  return isHave;
}

2、使用字体

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

<div style="font-family: 'simkai';">字体</div>