116 字
1 分钟
如何在微信小程序内使用外部字体

通过 font-face 使用外部字体#

首先通过 css 引入地址,然后在需要使用该字体时使用定义的 font-family 即可。

@font-face {
font-family: "kaiti";
src: url("https://spkf-zsxn-prod.s3.cn-north-1.amazonaws.com.cn/pic/livecenter/kaiti.ttf");
}
.test {
font-family: "kaiti";
}

这里的 url 要用 CDN 地址,本地地址无效。

通过 wx.loadFontFace 使用外部字体#

这里需要在 app.js 中将需要使用的字体引入,然后通过 font-family 使用改字体。

wx.loadFontFace({
family: "Bitstream",
source:
'url("https://spkf-zsxn-prod.s3.cn-north-1.amazonaws.com.cn/pic/livecenter/kaiti.ttf")',
success: (msg) => {
console.log(msg);
},
});
.test {
font-family: "Bitstream";
}
如何在微信小程序内使用外部字体
https://mogiihu.github.io/posts/2020-11-25-如何在微信小程序内使用外部字体/
作者
mogii
发布于
2020-11-25
许可协议
CC BY-NC-SA 4.0