只需六步，轻松搞定App字体设置！

App界面中，文字设计是最细节、也是不可忽视的基础部分。因此，App开发过程中，字体设置就成为一个典型的场景。

AVM.js(Application-View-Model)是一个移动优先的高性能跨端JavaScript框架，支持一次编写多端渲染。它提供更趋近于原生的编程体验，通过简洁的模型来分离应用的用户界面、业务逻辑和数据模型，适合高度定制的应用开发。

本文将讲解如何在使用AVM.js开发app时设置字体。

/ Step1

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

/ Step2

在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" />

/ Step3

配置后提交代码到云端，然后重新编译自定义loader，下载安装。

/ Step4

在代码中引用字体，示例如下：

<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>

/ Step5

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

/ Step6

tablayout 中字体的配置方法，在 app.json 中添加字段fontFamily。

转载请注明来自：https://www.qianyuthink.com/news/8446.html

上一页：手机程序开发需通过哪些流程环节？
下一页：前端开发与后端开发