uni-app:nvue和vue均引入自定义字体文件(hbuilderx 3.6.18)

一，复制字体文件到static目录下,如图: 

说明：刘宏缔的架构森林是一个专注架构的博客，

网站：https://blog.imgtouch.com
原文: https://blog.imgtouch.com/index.php/2023/06/04/uniapp-nvue-he-vue-jun-yin-ru-zi-ding-yi-zi-ti-wen-jian/

         对应的源码可以访问这里获取： https://github.com/liuhongdi/
         或: https://gitee.com/liuhongdi

说明：作者:刘宏缔 邮箱: 371125307@qq.com

二，在App.vue的css中定义字体文件的信息

说明：此处用来供vue使用
代码:
    @font-face {
            font-family: my-font;
            src: url('~@/static/fonts/FZKTJW.TTF');
    }

三，使用字体的代码:

item.nvue:
1,js加载字体，供 nvue使用:
            //加载时访问接口得到数据
            onLoad(options) {
                  // 页面创建时执行
                  console.log("页面加载");
                  //加载nvue需要使用到的字体
                  // #ifdef APP-PLUS-NVUE
                  const domModule = weex.requireModule('dom')  
                              domModule.addRule('fontFace', {  
                                  'fontFamily': "my-font",  
                                  'src': "url('../../static/fonts/FZKTJW.TTF')"  
                              });
                  // #endif
              },

2,在css中应用字体:

<style>
.title{
    text-align: center;
    font-size: 60rpx;
    font-family: my-font;
}
.author{
    text-align: center;
    font-size: 40rpx;
}
.content{
    text-align: center;
    font-size: 40rpx;
    margin-top: 30rpx;
    line-height: 80rpx;
    margin-left: 60rpx;
    letter-spacing: 10rpx;
    font-family: my-font;
}
</style>

四，测试效果:

vue:
nvue:

五，查看hbuilderx的版本: 

 
 
posted @ 2023-02-17 16:35  刘宏缔的架构森林  阅读(248)  评论(0)  编辑  收藏  举报