小程序|Failed to load local font resource：微信小程序加载第三方字体

Failed to load local font resource：微信小程序加载第三方字体

24-03-18 00:47

13570

blog.csdn.net

加载本地字体.ttf

Failed to load local font resource

将ttf转换为base64格式：https://transfonter.org/
步骤如下

将下载后的stylesheet.css 里的font-family属性名字改一下，然后引进页面里就行了，全局样式就放app.scss，单页面就引入单页面
注：

.title {
  height: 36rpx;
  font-size: 36rpx;
  font-family: stylesheet里的名字;
  font-weight: bold;
  color: #333333;
  line-height: 36rpx;
}
1
2
3
4
5
6
7
8

加载网络字体

好处不超包，坏处比较慢

wx.loadFontFace({
    family: 'yyy',
    source: 'url("xxx")',
    success: function (e) {
        console.log(e, '动态加载字体成功')
    },
    fail: function (e) {
        console.log(e, '动态加载字体失败')
    }
})
1
2
3
4
5
6
7
8
9
10

加载本地字体.ttf

Failed to load local font resource

.title {
  height: 36rpx;
  font-size: 36rpx;
  font-family: stylesheet里的名字;
  font-weight: bold;
  color: #333333;
  line-height: 36rpx;
}
1
2
3
4
5
6
7
8

加载网络字体

好处不超包，坏处比较慢

wx.loadFontFace({
    family: 'yyy',
    source: 'url("xxx")',
    success: function (e) {
        console.log(e, '动态加载字体成功')
    },
    fail: function (e) {
        console.log(e, '动态加载字体失败')
    }
})
1
2
3
4
5
6
7
8
9
10

加载本地字体.ttf

加载网络字体

加载本地字体.ttf

加载网络字体

评论记录：