一,官方文档地址:
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>
js
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'; }
说明:刘宏缔的架构森林是一个专注架构的博客,地址:https://www.cnblogs.com/architectforest
对应的源码可以访问这里获取: https://github.com/liuhongdi/
或: https://gitee.com/liuhongdi
说明:作者:刘宏缔 邮箱: [email protected]
三,测试效果
nvue页面:
vue页面:
四,查看hbuilderx的版本:
![](/i/l/?n=23&i=blog/1938691/202302/1938691-20230212213610644-947637439.png)