avm 开发 APP 怎么设置字体

技术咨询-F

​ avm 是一种简便的多端开发框架，可以开发APP、小程序、H5。今天学习了一下使用 avm 开发 APP 怎么设置字体，下面将经验分享给大家。
所需步骤：
1.  将需要使用的字体文件放到代码包res 目录下。
2. 在 config.xml 中配置字体，配置示例:

1. ​
   
2. <preference name="font" family="sf" value="widget/res/sf.ttf" />
   
3.         <preference name="font" family="hwxk" value="widget/res/hwxk.ttf" />
   
4.         <preference name="font" family="alpht" value="widget/res/alpht.ttf" />
   
5.         <preference name="font" family="pmkt" value="widget/res/pmkt.ttf" />
   
6. 
   
7. ​

复制代码

3.  配置后提交代码到云端，然后重新编译自定义loader，下载安装。
4. 在代码中引用字体，示例如下：

1. ​
   
2. <template>
   
3.         <view class="page">
   
4.                 <view>
   
5.                         <text class="font-text">测试字体1abc</text>
   
6.                 </view>
   
7.                 <view>
   
8.                         <text class="font2">测试字体2abcd</text>
   
9.                 </view>
   
10.                 <view>
    
11.                         <text class="font3">测试字体2abcd</text>
    
12.                 </view>
    
13.                 <view>
    
14.                         <text class="font4">测试字体2abcd</text>
    
15.                 </view>
    
16.         </view>
    
17. </template>
    
18. <script>
    
19. export default {
    
20.         name: 'test1',
    
21.         apiready() {//like created
    
22. 
    
23.         },
    
24.         data() {
    
25.                 return {
    
26. 
    
27.                 }
    
28.         },
    
29.         methods: {
    
30. 
    
31.         }
    
32. }
    
33. </script>
    
34. <style>
    
35. .page {
    
36.         height: 100%;
    
37. }
    
38. 
    
39. .font-text {
    
40.         font-size: 18px;
    
41.         font-family: sf;
    
42.         color: #000;
    
43. }
    
44. 
    
45. .font2 {
    
46.         font-size: 18px;
    
47.         font-family: hwxk;
    
48.         color: #000;
    
49. }
    
50. .font3 {
    
51.         font-size: 18px;
    
52.         font-family: alpht;
    
53.         color: #000;
    
54. }
    
55. .font4 {
    
56.         font-size: 18px;
    
57.         font-family: pmkt;
    
58.         color: #000;
    
59. }
    
60. </style>
    
61. 
    
62. ​

复制代码

5.  将代码全量同步到自定义loader中查看效果(如果同步后没生效，可以重启loader再查看效果)：

6.  tablayout 中字体的配置方法， 在 app.json 中添加字段 fontFamily，如下图：

好了，经过以上步骤就可以应用我们想使用的字体了，是不是很简单。
​