共计 1139 个字符,预计需要花费 3 分钟才能阅读完成。
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,如下图:
好了,通过以上步骤就能够利用咱们想应用的字体了,是不是很简略。
正文完