admin管理员组

文章数量:1594755

        在小程序开发中 经常需要我们自定义字体样式，我们可以通过一些字体网站下载字体文件最好是T T F格式的文件，然后我们把这些文件上传到微信的数据库(需要先开通云开发） 然后调用这些文件来达到自定义字体family的目的。

第一步：下载字体文件。

这里大家可以自行百度字体文件下载的一些网站。

第二步：上传字体文件。

1. 打开云开发。

2.点击存储。

3.上传文件。

完成！

第三步：获取文件临时链接并传给字体加载函数。

这里的思路是，我们要加载是字体库， 根据字体加载函数，首先我们要获得字体的下载链接， 因此我们要调用获取数据库中文件临时链接的函数。

具体代码如下：

 wx.cloud.getTempFileURL({
      fileList:["cloud://cloud1-1g1re6j0a64321a3.636c-cloud1-1g1re6j0a64321a3-1309337326/FZSXSLKJW.TTF"],
      success:res=>{
        console.log(res.fileList[0].tempFileURL)
        let url = res.fileList[0].tempFileURL
        wx.loadFontFace({
          global:true,
          family: 'kaiti',// 自定义字体名
          source: 'url("' + url + '")',
          desc: {
            style: 'normal',
            weight: 'normal',
            variant: 'normal'
          },
          success: (result) => {
            console.log("成功！")
          },
          fail: () => {
            console.log("失败！")
          },
          complete: () => {}
        });
          
      },
      fail:console.error
    })
  }

需要注意的是第二行中fileList文件ID来自这里:

 

 第五步：调用。

局部调用：

直接在样式文件font-family: "kaiti";

全局调用：

在app.wxss中：

page{

font-family: "kaiti"; // 引号内为自定义的family是字体名

}

附： wx.loadFontFace(Object object) | 微信开放文档CloudCloud: Promise<Object> | 微信开放文档

本文标签： 字体自定义上传文件程序

版权声明：本文标题：【微信小程序】上传字体文件自定义字体family 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://m.elefans.com/dianzi/1728201435a1149430.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。