uni-app:ios/android中的nvue和vue页面加载自定义字体(hbuilderx 3.7.3) -526互联

一，官方文档地址:

https://uniapp.dcloud.net.cn/tutorial/nvue-api.html#addrule

二，代码

1,nvue页面:

模板

                        <view class="listTitle">
                                {{item.title}}
                        </view>
                        
                        <view style="width:200rpx;display: flex;flex-direction: column;justify-content: center;">
                            <text style="font-family: kaitin;">{{item.author_name}}</text>
                        </view>

beforeCreate() {
            console.log('======list3:beforeCreate');//加载字体:
            //#ifdef APP-PLUS-NVUE
            console.log("当前平台:APP-PLUS-NVUE,开始加载字体:");
            const domModule = uni.requireNativePlugin('dom')
            domModule.addRule('fontFace', {
                            'fontFamily': "kaitin",  
                            'src': "url('https://spkf-zsxn-prod.s3.cn-north-1.amazonaws.com.cn/pic/livecenter/kaiti.ttf')"  
             });
            //#endif
},

css

.listTitle {
    font-family: 'kaitin';
    padding-left: 20rpx;
    padding-right: 20rpx;
    height:100%;
    width:490rpx;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

注意：.listTitle这个样式无效，在nvue中，作用到text元素上才生效，大家注意判断

2，vue页面:

template:

<text class="title">{{title}}</text>

css

   /* #ifdef APP-PLUS */
   @font-face {
     font-family: "kaiti";
     src: url("https://spkf-zsxn-prod.s3.cn-north-1.amazonaws.com.cn/pic/livecenter/kaiti.ttf");
   }
   /* #endif */
   
.title{
    font-size: 60rpx;
    font-family: 'kaiti';
}
.content{
    text-align: center;
    font-size: 40rpx;
    margin-top: 30rpx;
    line-height: 80rpx;
    margin-left: 60rpx;
    letter-spacing: 10rpx;
    font-family: 'kaiti';
}