提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

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

AppVue文件 自定义 18 字体 引入 uni
2023-09-14 09:01:15 时间

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

说明：刘宏缔的架构森林是一个专注架构的博客，地址：https://www.cnblogs.com/architectforest

         对应的源码可以访问这里获取： 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的版本: 

 
 

相关文章