????????在小程序開發(fā)中 經(jīng)常需要我們自定義字體樣式，我們可以通過一些字體網(wǎng)站下載字體文件最好是T T F格式的文件，然后我們把這些文件上傳到微信的數(shù)據(jù)庫(需要先開通云開發(fā)） 然后調(diào)用這些文件來達到自定義字體family的目的。

第一步：下載字體文件。

這里大家可以自行百度字體文件下載的一些網(wǎng)站。

第二步：上傳字體文件。

1. 打開云開發(fā)。

2.點擊存儲。

3.上傳文件。

完成！

第三步：獲取文件臨時鏈接并傳給字體加載函數(shù)。

這里的思路是，我們要加載是字體庫， 根據(jù)字體加載函數(shù)，首先我們要獲得字體的下載鏈接， 因此我們要調(diào)用獲取數(shù)據(jù)庫中文件臨時鏈接的函數(shù)。

具體代碼如下：

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].tempFileURLwx.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來自這里:

?

?第五步：調(diào)用。

局部調(diào)用：

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

全局調(diào)用：

在app.wxss中：

page{font-family: "kaiti"; // 引號內(nèi)為自定義的family是字體名}

附：?wx.loadFontFace(Object object) | 微信開放文檔CloudCloud: Promise<Object> | 微信開放文檔

總結(jié)

以上是生活随笔為你收集整理的【微信小程序】上传字体文件自定义字体family的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。