uniapp使用思源宋体开发App,安卓文字显示延迟

原创
09/08 08:53
阅读数 178

uniapp使用思源宋体开发App,安卓文字显示延迟

更新时间:2020-09-08

一.问题描述

客户要开发一款App,要求仿照学习强国.其中,文字要求使用思源宋体.开发接近尾声,发现思源宋体在安卓真机上出现文字延迟显示的问题.

二.解决方案

1.思源宋体字体包共七款字体,字体内容如下:

2.我开发中使用的是SourceHanSerifCN-Medium-6.otf;

3.安卓真机测试,字体显示延迟要在0.5秒到1秒之间,苹果机器可以直接显示;

4.针对这个问题,采取了一下方案;

4.1官方推荐(网址:链接),当字体大于40Kb时,建议转换成base64;使用字体转base64的网站,转换了字体,得到很长恒昌的字符串,复制,卡死,粘贴,卡死,保存,编译器卡死.原因是字体11M,即使转换成base64的字符串,也很大,直接放弃;

4.2尝试字蛛font-spider压缩字体.在项目目录下面安装font-spider,成功安装在node_modles中显示font-spider插件.根据网上教程修改,还需要将.otf格式的字体转换成.ttf格式的,这是必须的.又去网上找.otf转.ttf工具.这里有个坑,有些网站提供在线otf转ttf,但是转换出来的文件很小,建议将转化出来的字体应用一下,看一下是否真的转换成功了.我使用了一款windows工具,转换出来文件依旧是11M.运用这个ttf文件,进行压缩.因为引用字体是全局引用page{font-family:XXX}所以压缩命令修改成了 font-spider App.vue.可以成功得到.font-spider.真机测试,依旧延时,原因是压缩后的字体依旧很大,11M.失败

4.3返回问题本身,字体延迟显示在0.5-1秒之间;我们打开页面的时候,发送的网络请求多数在1秒之内,这种不会影响用户使用效果.在客户坚持使用思源宋体的前提下,我们将每个页面都进行了0.5秒的延迟显示;再加上网络请求的时间和数据渲染时间,不错的规避了字体延迟显示的问题.同时,我们也可以给页面显示添加动画效果,提升用户体验感.

以上uniapp使用思源宋体在安卓真机上延迟显示的解决方案.

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部