avm 是一種簡便的多端開發框架，可以開發APP、小程序、H5。今天學習了一下使用 avm 開發 APP 怎麼設置字體，下面將經驗分享給大家。

所需步驟：

1.  將需要使用的字體文件放到代碼包res 目錄下。

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

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

3.  配置後提交代碼到雲端，然後重新編譯自定義loader，下載安裝。

4. 在代碼中引用字體，示例如下：

<template>
    <view class="page">
        <view>
            <text class="font-text">測試字體1abc</text>
        </view>
        <view>
            <text class="font2">測試字體2abcd</text>
        </view>
        <view>
            <text class="font3">測試字體2abcd</text>
        </view>
        <view>
            <text class="font4">測試字體2abcd</text>
        </view>
    </view>
</template>
<script>
export default {
    name: 'test1',
    apiready() {//like created

    },
    data() {
        return {

        }
    },
    methods: {

    }
}
</script>
<style>
.page {
    height: 100%;
}

.font-text {
    font-size: 18px;
    font-family: sf;
    color: #000;
}

.font2 {
    font-size: 18px;
    font-family: hwxk;
    color: #000;
}
.font3 {
    font-size: 18px;
    font-family: alpht;
    color: #000;
}
.font4 {
    font-size: 18px;
    font-family: pmkt;
    color: #000;
}
</style>

5.  將代碼全量同步到自定義loader中查看效果(如果同步後沒生效，可以重啓loader再查看效果)：

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

好了，經過以上步驟就可以應用我們想使用的字體了，是不是很簡單。