前言
因项目需求,需要一套第三方字体,如下图所示效果(YC MEMBERSHIP SEASON CARD 和 数字0):
实现
1、引入一套第三方字体(如上图所示的第三方字体)。
2、在 App.vue 文件中写入自定义字体样式。
3、调用。
当然,也可以直接使用微信API wx.loadFontFace , 具体查看官方示例文档。
具体演示代码
App.vue文件中
<style>
@font-face {
font-family:"PuHuiTi-Bold";
src: url('https://www.baidu.com/api/artCenter/static/font/PuHuiTi-Bold.ttf');
}
.font-num{font-family:KronaOne}
</style>
view.vue中引用
<view>
<text class="font-num">AC MEMBERSHIP SEASON CARD</text>
</view>
问题
1、微信小程序中网络字体的地址必须是https。若是http则只能在微信开发工具中生效,正式发布后手机上预览不生效。