嗨，我是小路。今天主要和大家分享的主题是“uniapp 微信小程序中如何加载字体”。        

在日常开发中，小程序经常会用到各种字体。一般常用的加载字体的方法，就是css中加载字体，还有一种加载字体的方法是用微信的api进行字体的加载。

一、主要属性

1.wx.loadFontFace

定义：微信小程序提供的 API，用于动态加载并使用自定义字体。它允许开发者将特定的字体文件（如 .ttf, .woff 等）加载到小程序中，并在 CSS 中通过 font-family 引用，从而实现个性化的文本展示效果。

wx.loadFontFace({
    'family': 'font-name', //设置一个font-family使用的名字 中文或英文
    'global': true, //是否全局生效
    'source': 'https://www.you.com/static/page/D-DIN-Bold.ttf', //字体资源的地址
    'success': function (e) {
      console.log('===>字体调用成功');
    },
    'fail': function (e) {
      console.log('===>字体调用失败');
    }
  });

2.css加载

定义：微信小程序提供的 API，用于动态加载并使用自定义字体。它允许开发者将特定的字体文件（如 .ttf, .woff 等）加载到小程序中，并在 CSS 中通过 font-family 引用，从而实现个性化的文本展示效果。示例效果如下：

@font-face {
  font-family: 'FZZongYi-M05S';
  src: url('https://you.www.com/FZZYJW--GB1-0.woff2') format('woff2'),
       url('https://you.www.com/FZZYJW--GB1-0.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

三、最后总结

       小程序加载字体，在一定程度上将字体进行压缩，让字体能快速的加载下来。尤其是使用wx.loadFontFace方法的时候，更是要注意字体包的大小，避免造成渲染阻塞。

都看到这里了，记得【点赞】+【关注】哟。