需求：輸入一段標題后，可選擇不同的字體顯示在頁面上。

免費的商用字體下載鏈接：

鏈接: https://pan.baidu.com/s/1XLabx_xzC5kJycv7ejJU8Q 提取碼: ka4r

方法一：本地引入

1、打開https://transfonter.org/

2、引入ttf或其他格式的文件，勾選banse64格式輸出
3、將輸出的文件下載到本地，引入到wxss里面

優點：加載速度快，變換字體的過程幾乎看不見，用戶體驗好
缺點：轉為base64后文件一般過大，如果太多字體文件會影響性能，小程序打包時最大不能超過2M，就需要分包處理；也可以指定文字進行輸出，這樣文件會小很多。

方法二：css外鏈形式引入

1、將ttf文件放到服務器中；
2、新建一個wxss文件，寫入以下代碼：

@font-face {font-family: "HarmonyOSHeiTi"; /* 這里的字體名稱是自定義的 */src: url("https://h5.amemori.cn/h5/font-css/1.ttf"); /* 服務器上ttf文件的路徑，記得配置域名權限 */font-weight: normal;font-style: normal;font-display: swap; } @font-face {font-family: "ALiPuHui";src: url("https://h5.amemori.cn/h5/font-css/2.otf");font-weight: normal;font-style: normal;font-display: swap; }

3、在需要用到的css頁面引入該文件并使用字體：

@import '../font/font-family.wxss';text{font-family: "HarmonyOSHeiTi"; }

優點：不占用小程序內存
缺點：更換字體時有延遲，用戶會明顯的看到更換字體的過程。

方法三：js外鏈形式引入

1、在需要用到的頁面的js文件，onLoad中寫入：

wx.loadFontFace是微信官方動態加載網絡字體方法：https://developers.weixin.qq.com/miniprogram/dev/api/ui/font/wx.loadFontFace.html

onLoad(options) {wx.loadFontFace({family: 'HarmonyOSHeiTi',source: 'url("https://h5.amemori.cn/h5/font-css/1.ttf")',complete: function (res) { console.log('插入字體'); console.log(res); },success: function (res) { console.log('成功'); console.log(res); },fail: function (res) { console.log('失敗'); console.log(res); },})},

2、在wxss中直接使用family中定義的字體就可以啦。
優缺點同方法二

四、出現的問題以及解決方法：

開發工具和ios都顯示正常，但是安卓機字體設置無效
解決辦法：服務器配置cors，即可解決。

總結

以上是生活随笔為你收集整理的小程序中引入外部字体的三种方式以及出现的问题的全部內容，希望文章能夠幫你解決所遇到的問題。

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