需求：輸入一段標題后，可選擇不同的字體顯示在頁面上。
免費的商用字體下載鏈接：
鏈接: https://pan.baidu.com/s/1XLabx_xzC5kJycv7ejJU8Q 提取碼: ka4r
方法一：本地引入
1、打開https://transfonter.org/
2、引入ttf或其他格式的文件，勾選banse64格式輸出
3、將輸出的文件下載到本地，引入到wxss里面
優(yōu)點：加載速度快，變換字體的過程幾乎看不見，用戶體驗好
缺點：轉(zhuǎn)為base64后文件一般過大，如果太多字體文件會影響性能，小程序打包時最大不能超過2M，就需要分包處理；也可以指定文字進行輸出，這樣文件會小很多。
方法二：css外鏈形式引入
1、將ttf文件放到服務器中；
2、新建一個wxss文件，寫入以下代碼：
@font-face {
font-family: "HarmonyOSHeiTi"; /* 這里的字體名稱是自定義的 */
src: url("https://h5.amemori.cn/h5/font-css/1.ttf"); /* 服務器上ttf文件的路徑，記得配置域名權(quán)限 */
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";
}
優(yōu)點：不占用小程序內(nèi)存
缺點：更換字體時有延遲，用戶會明顯的看到更換字體的過程。
方法三：js外鏈形式引入
1、在需要用到的頁面的js文件，onLoad中寫入：
wx.loadFontFace是微信官方動態(tài)加載網(wǎng)絡字體方法：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中定義的字體就可以啦。
優(yōu)缺點同方法二
四、出現(xiàn)的問題以及解決方法：
開發(fā)工具和ios都顯示正常，但是安卓機字體設(shè)置無效
解決辦法：服務器配置cors，即可解決。文章來源：http://www.zghlxwxcb.cn/news/detail-493116.html
文章來源地址http://www.zghlxwxcb.cn/news/detail-493116.html
到了這里，關(guān)于小程序中引入外部字體的三種方式以及出現(xiàn)的問題的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
