小程序中使用自定義字體

首先小程序字體文件是無法放在本地的
當你嘗試在css中導(dǎo)入本地字體文件時


image.png

控制臺中會顯示如下圖報錯


image.png

然后 我們嘗試將字體文件放在遠程服務(wù)器試試


于是將字體文件上傳至 阿里云OSS服務(wù)


復(fù)制url 粘貼

IDE上成功顯示字體樣式



發(fā)現(xiàn)一絲不對勁
控制臺顯示報錯

真機預(yù)覽試試
真機預(yù)覽

果然沒有生效

難道是后臺沒有配置oss服務(wù)器的域名白名單

登錄小程序后臺
添加合法域名

域名白名單添加

保存提交
try again↓
還是不行

還是不行 跟之前一樣 還是控制臺報錯VM7333:5 Failed to load font https://surx.oss-cn-beijing.aliyuncs.com/font/Digital2.ttf net::ERR_CACHE_MISS From server 59.110.185.128
IDE顯示字體 真機無效

秉著求知的精神
看來是時候祭出殺器


一個會裝逼的程序員 必須得會用這個

然后找到了以下兩個辦法

一、.將圖片轉(zhuǎn)換成BASE64

1.首先打開 在線轉(zhuǎn)換工具 https://transfonter.org/
2.然后上傳字體文件
image.png
3.轉(zhuǎn)換并下載
4.解壓下載的文件


打開文件
stylesheet.css

選中復(fù)制
粘貼到wxss里如下圖


真機預(yù)覽試試


搞定！

二、使用wx.loadFontFace(OBJECT)接口

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

推薦閱讀更多精彩內(nèi)容