微信小程序支持自定義字體開放出來也有段時間，這邊整理下使用自定義字體中，容易忽略的一些問題，和簡便的全局自定義方式。如果是同時加載兩種字體包，先下載下來的會被后下載下來的字體包給覆蓋。

官網接口文檔

因此字體包有卻只能用一種

因此字體包有卻只能用一種

因此字體包有卻只能用一種

加載字體

加載字體分兩種，一種是局部的字體，比如說是某個頁面值需要引入的自定義的字體，只有這個頁面才需要用到，那就直接官方提供的例子。

wx.loadFontFace({

family: 'Bitstream Vera Serif Bold',

source: 'url("https://sungd.github.io/Pacifico.ttf")',

success: (res) => { console.log(' load font success ', res); },

fail: (res) => { console.log(' load font fail ', res); },

})

加載全局字體，要在app.js的onLaunch方法里面，記得global需要設置為true，這些注意看下官方文檔，應該是不難。

wx.loadFontFace({

global: true,

family: 'HYSSEJ',

source: 'url("https://sungd.github.io/Pacifico.ttf")',

success: (res) => { console.log(' load font success ', res); },

fail: (res) => { console.log(' load font fail ', res); },

});

設置安全下載域名地址

進入小程序微信后->開發->開發設置。講服務器的下載地址配置到后臺里面，不然下載會失敗。(TIPS 如果只是單純自己做測試的話，把小程序的debug模式開起來，就可以忽略安全域名的事情)

image.png

設置全局樣式

在app.wxss 里面，設置全局的命名。

page {

--Nomal-Font-: 'HYSSEJ';

background: white;

}

.container {

font-family: var(--Nomal-Font-) !important;

overflow: hidden;

}

組件需要用的字體的地方，用如下兩種方法都可以。

font-family: 'HYSSEJ' !important;

font-family: var(--Nomal-Font-) !important;

項目中其實很多時候我們并不需要用到所有的字體，可以單獨做下字體包。自定義字體包

總結

以上是生活随笔為你收集整理的微信小程序可以加服务器上的字体,微信小程序中自定义字体的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。