uniapp 字体引入

uniapp 小程序引用字体

官方链接
在这里插入图片描述
我们用到的字体可能会很大,比如我用到的阿里普惠字体就有8M,这么大的字体不管是放服务器还是放小程序内都是很不好的,页面加载很慢。
千万不要把8M的文件转成beas64放入编辑器内,我试过,vccode还好,HbuildX直接卡死。
推荐一个压缩插件 font-spider

font-spider会帮我们剔除不需要的文字
比如你需要某一个特殊字体,而项目中只有标题 分类啥的可以用到那就推荐你使用这个。比如我项目只用到大概五十多个字。
把文字写在html文件的div里面
在html页面引入自己需要的特殊字体
font-spider会根据你页面使用到的字体和文字去压缩
这样压缩完后,差不多8M的字体文件,只需要几十kb

执行 npm install font-spider -g

下载后,cd切换到自己的index.html

执行 font-spider ./index.html

在这里插入图片描述

这样就压缩好了。
把压缩好的文件拿到项目里面
uniapp 就放在static里面
在app.vue页面 的style里面使用

 @font-face {
   font-family: 'AlibabaPuHuiTiH';  //这个名称可以自己随便定义
 	src: url('~@/static/style/Alibaba-PuHuiTi-Heavy.ttf');
 }

这样页面就可以使用特殊字体了。
有问题的可以联系我,给大家发dome

  • 3
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 6
    评论
评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

MrHao_

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值