一文告诉你AVM中设置字体的方法

技术咨询-特特

    avm 是一种简便的多端开发框架，可以开发APP、小程序、H5。今天学习了一下使用 avm 开发 APP 怎么设置字体，下面将经验分享给大家。

所需步骤：

1.  将需要使用的字体文件放到代码包res 目录下。

2. 在 config.xml 中配置字体，配置示例:

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

复制代码

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

复制代码

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



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



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