微信小程序 - 引入第三方字体（使用网络字体）

前言

因项目需求，需要一套第三方字体，如下图所示效果（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则只能在微信开发工具中生效，正式发布后手机上预览不生效。