微信小程序使用特殊字体包

js页面

Page({
    data: {
       fontFamily: 'font1', 
    },
    loadFontFace() {
        const self = this
        wx.loadFontFace({
            family: this.data.fontFamily,  
            // 将ttf格式的字体包上传到线上服务器,
            source: 'url("https://mybucket-1258364471.cos.ap-chengdu.myqcloud.com/5440d071-b699-4d1a-b5f7-fc0203eecbef.ttf")',
            success(res) {
                console.log(res.status)
            },
            fail(res) {
                console.log(res.status)
            },
            complete(res) {
                console.log(res.status)
            }
        })
    },
    onLoad: function(options) {
       this.loadFontFace()
        
    },
    onReady: function() {
        //Do some when page ready.
        
    },
    onShow: function() {
        //Do some when page show.
        
    },
    onHide: function() {
        //Do some when page hide.
        
    },
    onUnload: function() {
        //Do some when page unload.
        
    },
    onPullDownRefresh: function() {
        //Do some when page pull down.
        
    }
})

html/wxml

   <text class='name_jj font-loaded'>{{item.name}}</text>

css/wxss

.font-loaded {
  font-family: 'font1';
  font-size: 40rpx;
  text-shadow: 0 0 8rpx #9F5314, 8rpx 0 #9F5314, 0 8rpx #9F5314, -2px 0 #9F5314;
  filter: glow(color=#9F5314, strength=3);
  color: #F6EDC1;
}
posted @ 2021-03-03 18:39  巷陌-jh  阅读(778)  评论(0)    收藏  举报