一、loadFontFace接口
小程序官方提供的接口，最便捷的加載字體的方法，不過限制頗多。必須https且同源，canvas等原生組件不支持。注意??！使用本地文件無效，必須使用網(wǎng)絡(luò)地址。
官方文檔：wx.loadFontFace(Object object) | 微信開放文檔
演示代碼：
wx.loadFontFace({
family: 'DFPWaWa-B5',
source: 'url("https://we7.stuyun.com/DFPWaWa-B5.ttf")',
success: res => {
console.log('font load success', res)
},
fail: err => {
console.log('font load fail', err)
}
})二、face-font url
傳統(tǒng)的css規(guī)則，跟loadFontFace限制一樣，必須https且同源，不支持canvas等原生組件，不支持本地文件。
演示代碼：
@font-face {
font-family: 'DFPWaWa-B5';
src: url("https://we7.stuyun.com/DFPWaWa-B5.ttf")
}三、face-font base64
網(wǎng)上教程常介紹的方法，到transfonter上傳文件，formats只勾選ttf就行?？梢詫⒆煮w轉(zhuǎn)換成base64的face-font，復(fù)制到wxss里面就可以使用。但是缺點也很明顯，小程序最大體積限制只能2m，隨便一個中文字體就超過了。
一、找設(shè)計要.ttf文件的字體
二、通過在線文字轉(zhuǎn)換工具對文件進行轉(zhuǎn)換，將字體轉(zhuǎn)化為base64的face-font
操作步驟：
1.點開在線文字轉(zhuǎn)換工具
2.點擊按鈕Add fonts（添加字體，這里所要傳的文件就是找設(shè)計要得.tff文件）
3.將Base64 encode按鈕打開（Base64 編碼），下面的Formats按鈕（格式按鈕）只需勾選TTF格式
4.點擊Convert按鈕（轉(zhuǎn)換按鈕），轉(zhuǎn)換好后點擊左邊的Download（下載），將下載好的文件打開，里面會有一個stylesheet.css文件
?文章來源：http://www.zghlxwxcb.cn/news/detail-716582.html
三、復(fù)制下載好的stylesheet.css文件內(nèi)容，粘貼到需要使用的wxss文件內(nèi)文章來源地址http://www.zghlxwxcb.cn/news/detail-716582.html
@font-face {
font-family: 'DFPWaWa-B5';
src: url('./fonts/DFPWaWa-B5.ttf') format('truetye'); //這里的路徑為上面轉(zhuǎn)換吼的base64的路徑
}
.box {
font-family: 'DFPWaWa-B5'; //運用在你所需要的標簽樣式上，名字和上面引入的font-family名稱要一一對應(yīng)，記得要加''
}四、總結(jié)：最好還是使用小程序官方提供的loadFontFace接口，最便捷的加載字體的方法不過限制頗多。我這邊的需求只能通過第三種方法實現(xiàn)，具體還是看各位的需求去使用哪種方法
到了這里，關(guān)于【微信小程序】使用自定義字體的三種方法的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
