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