H5 中加载生僻字体过慢求助

qingshui33 · 2023-11-21 09:12:26 · 221 次点击
需求:在 App 中支持生僻字输入

场景描述:在 App 里面某部分功能是套的 H5 的页面,现在整个 App 想要支持生僻字输入,于是我在 H5 的项目中引入了一个生僻字体的库,但是这个字体库有 20 多兆,就导致了加载过慢,在文件没有加载进来的时候,输入生僻字还是显示不出来,这种情况有什么解决的办法吗
举报· 221 次点击
登录 注册 站外分享
10 条回复  
danbai 小成 2023-11-21 09:19:13
减少字体大小。嵌入到 app 。可行吗
chenluo0429 小成 2023-11-21 09:23:17
unicode-range ?不过也只能稍微缓解
yanng 小成 2023-11-21 09:25:08
不要用全量的生僻字,只需要一小部分啊
我司的只有 312kb ,你用 woff2 格式,现在大部分都支持了。
为了兼容,我们还搞了个 woff 格式,407kb 。
不要用全量!人名什么的够用就行。
lisxour 小成 2023-11-21 09:29:38
得看你用的具体实现技术了
1. 半 hybrid ,具有请求拦截,这种直接拦截相关请求,直接返回 App 包里的资源
2. 半 hybrid ,没有请求拦截,这种可以 App 自己开个本地服务器,用来请求一部分静态资源
3. 纯套壳,基本没有本地代码,html 里写好 preload prefetch ,让网页一开始加载就立马发请求,同时代码里做好字体加载的等待,没加载完不让操作等等的交互优化
wuxidixi 小成 2023-11-21 09:34:07
最简单的办法是看看生僻字的范围是否固定,要是固定就把字体包里面的文字提取出来,这样体积小了,在提前引入,一点不慢
sqlNice 小成 2023-11-21 09:37:43
如果你想提取一个网页或应用程序中使用的特殊字体,可以使用字体提取工具。Spider 是一种字体提取工具,可以帮助你提取网页中使用的特殊字体。

Spider 是一款功能强大的字体提取工具,可以扫描网页并提取使用的字体文件。你可以在 Spider 的官方网站上下载并安装它。安装完成后,你可以使用 Spider 打开网页并提取使用的字体文件。

除了 Spider ,还有其他一些字体提取工具可供选择,例如 Font Squirrel 、FontForge 、Transfonter 等。这些工具都有不同的功能和使用方式,你可以根据自己的需求选择合适的工具。

请注意,在提取字体文件时,要遵守版权法律和使用许可协议。确保你有权使用和提取这些字体文件。
totoro625 小成 2023-11-21 09:52:10
我是全部手动提取的,我自用字体: https://conf.totoro.pub/fonts/font-face.css
手动切片工具: https://github.com/ecomfe/fontmin-app

有一个自动化工具,我暂时找不到,他可以把字体切成 45/92/368 片,我贴了完整的数据源: https://github.com/Totoro625/totoro625-font-family/releases/tag/demo
lycpang 小成 2023-11-21 11:11:21
能不能搞一个开关,毕竟大部分不需要生僻字把。需要的就做个弹窗让他等着下载
lilei2023 小成 2023-11-22 09:32:37
不要全量的字库, 看看自己需要那几个字的,找个工具可以缩减一下
12下一页
返回顶部