一,复制字体文件到static目录下,如图:
![](/i/l/?n=23&i=blog/1938691/202302/1938691-20230212213707947-1521894.png)
说明:刘宏缔的架构森林是一个专注架构的博客,地址:https://www.cnblogs.com/architectforest
对应的源码可以访问这里获取: https://github.com/liuhongdi/
或: https://gitee.com/liuhongdi
说明:作者:刘宏缔 邮箱: [email protected]
二,在App.vue的css中定义字体文件的信息
说明:此处用来供vue使用![](/i/l/?n=23&i=blog/1938691/202302/1938691-20230212213708045-106143680.png)
@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:![](/i/l/?n=23&i=blog/1938691/202302/1938691-20230217162728991-562722451.png)
![](/i/l/?n=23&i=blog/1938691/202302/1938691-20230217162654776-1128629461.png)
五,查看hbuilderx的版本:
![](/i/l/?n=23&i=blog/1938691/202302/1938691-20230212213610644-947637439.png)