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

标签：nvue vue 自定义 my 字体 font com

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

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

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

说明：作者:刘宏缔 邮箱: [email protected]

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

说明：此处用来供vue使用 代码:

    @font-face {
            font-family: my-font;
            src: url('~@/static/fonts/FZKTJW.TTF');
    }

三，使用字体的代码:

item.nvue: 1,js加载字体，供 nvue使用:

            //加载时访问接口得到数据
            onl oad(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的版本: 

   

标签：nvue,vue,自定义,my,字体,font,com
From： https://www.cnblogs.com/architectforest/p/17130706.html