H5 中加载生僻字体过慢求助 - V2EX
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
qingshui33
V2EX    HTML

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

  •  
  •   qingshui33 2023-11-21 09:12:26 +08:00 2988 次点击
    这是一个创建于 689 天前的主题,其中的信息可能已经有所发展或是发生改变。
    需求:在 App 中支持生僻字输入

    场景描述:在 App 里面某部分功能是套的 H5 的页面,现在整个 App 想要支持生僻字输入,于是我在 H5 的项目中引入了一个生僻字体的库,但是这个字体库有 20 多兆,就导致了加载过慢,在文件没有加载进来的时候,输入生僻字还是显示不出来,这种情况有什么解决的办法吗
    第 1 条附言    2023-11-21 10:09:53 +08:00
    要支持的生僻字在这里: https://www.qqxiuzi.cn/zh/hanzi-unicode-bianma.php

    要支持扩展 A ,B ,C ,D ,E ,F ,康熙部首,汉语注音 这些
    23 条回复    2024-01-08 08:09:42 +08:00
    danbai
        1
    danbai  
    PRO
       2023-11-21 09:19:13 +08:00 via Android
    减少字体大小。嵌入到 app 。可行吗
    qingshui33
        2
    qingshui33  
    OP
       2023-11-21 09:22:53 +08:00
    @danbai 如果放到 App 中的话,那在 H5 中该怎么使用这个字体呢
    chenluo0429
        3
    chenluo0429  
       2023-11-21 09:23:17 +08:00 via Android
    unicode-range ?不过也只能稍微缓解
    yanng     4
    yanng  
       2023-11-21 09:25:08 +08:00
    不要用全量的生僻字,只需要一小部分啊
    我司的只有 312kb ,你用 woff2 格式,现在大部分都支持了。
    为了兼容,我们还搞了个 woff 格式,407kb 。
    不要用全量!人名什么的够用就行。
    lisxour
        5
    lisxour  
       2023-11-21 09:29:38 +08:00
    得看你用的具体实现技术了
    1. 半 hybrid ,具有请求拦截,这种直接拦截相关请求,直接返回 App 包里的资源
    2. 半 hybrid ,没有请求拦截,这种可以 App 自己开个本地服务器,用来请求一部分静态资源
    3. 纯套壳,基本没有本地代码,html 里写好 preload prefetch ,让网页一开始加载就立马发请求,同时代码里做好字体加载的等待,没加载完不让操作等等的交互优化
    wuxidixi
        6
    wuxidixi  
       2023-11-21 09:34:07 +08:00
    最简单的办法是看看生僻字的范围是否固定,要是固定就把字体包里面的文字提取出来,这样体积小了,在提前引入,一点不慢
    sqlNice
        7
    sqlNice  
       2023-11-21 09:37:43 +08:00
    如果你想提取一个网页或应用程序中使用的特殊字体,可以使用字体提取工具。Spider 是一种字体提取工具,可以帮助你提取网页中使用的特殊字体。

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

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

    请注意,在提取字体文件时,要遵守版权法律和使用许可协议。确保你有权使用和提取这些字体文件。
    totoro625
        8
    totoro625  
       2023-11-21 09:52:10 +08:00
    我是全部手动提取的,我自用字体: 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
    qingshui33
        9
    qingshui33  
    OP
       2023-11-21 09:56:14 +08:00
    @chenluo0429 好的,这个等会试下看看
    qingshui33
        10
    qingshui33  
    OP
       2023-11-21 09:57:29 +08:00
    @yanng 刚看了下,按照需求来的话,我们大概需要支持 7w 个左右的生僻字,然后后端给发了三个字体文件,加起来得有 60M 左右了
    qingshui33
        11
    qingshui33  
    OP
       2023-11-21 09:58:23 +08:00
    @lisxour 这个也不太明白原生那边有的啥方法,
    qingshui33
        12
    qingshui33  
    OP
       2023-11-21 10:00:34 +08:00
    @wuxidixi 范围是固定的,但是字数也确实很多,我看看能不能缩小点
    qingshui33
        13
    qingshui33  
    OP
       2023-11-21 10:08:10 +08:00
    @sqlNice 可以
    qingshui33
        14
    qingshui33  
    OP
       2023-11-21 10:08:24 +08:00
    @totoro625 好的,我看看哈
    yanng
        15
    yanng  
       2023-11-21 10:17:14 +08:00
    @qingshui33 为什么需要这么多,你需要问这个问题。
    如果需要那么多,放 h5 肯定不行的,必须要放客户端。
    totoro625
        16
    totoro625  
       2023-11-21 10:34:44 +08:00
    常用 6763 个汉字使用频率表: https://blog.sina.com.cn/s/blog_5e2ffb490100dnfg.html
    切片之后就会发现常用的 6k 字其实只有不到 1mb
    处理好 Unicode 编码范围,切 92 片是常用的办法,实在不行就 368 片
    qingshui33
        17
    qingshui33  
    OP
       2023-11-21 10:50:28 +08:00
    @yanng 我也很想知道他们为什么要支持这么多,奈何人言甚微啊,放客户端的话,那在其中嵌套的 H5 该怎么使用呢
    qingshui33
        18
    qingshui33  
    OP
       2023-11-21 10:50:41 +08:00
    @totoro625 好的,我看看啊
    lycpang
        19
    lycpang  
       2023-11-21 11:11:21 +08:00
    能不能搞一个开关,毕竟大部分不需要生僻字把。需要的就做个弹窗让他等着下载
    qingshui33
        20
    qingshui33  
    OP
       2023-11-21 13:07:05 +08:00
    @lycpang 这事情得看需求怎么说了
    lilei2023
        21
    lilei2023  
       2023-11-22 09:32:37 +08:00
    不要全量的字库, 看看自己需要那几个字的,找个工具可以缩减一下
    qingshui33
        22
    qingshui33  
    OP
       2023-11-22 13:59:09 +08:00
    @lilei2023 主要是他支持的字太多了,目前准备是先这样,后续让他们再缩小一下范围
    Ashes26
        23
    Ashes26  
       2024-01-08 08:09:42 +08:00 via Android
    关于     帮助文档     自助推广系统     博客     API     FAQ     Solana     2968 人在线   最高记录 6679       Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 28ms UTC 12:12 PVG 20:12 LAX 05:12 JFK 08:12
    Do have faith in what you're doing.
    ubao snddm index pchome yahoo rakuten mypaper meadowduck bidyahoo youbao zxmzxm asda bnvcg cvbfg dfscv mmhjk xxddc yybgb zznbn ccubao uaitu acv GXCV ET GDG YH FG BCVB FJFH CBRE CBC GDG ET54 WRWR RWER WREW WRWER RWER SDG EW SF DSFSF fbbs ubao fhd dfg ewr dg df ewwr ewwr et ruyut utut dfg fgd gdfgt etg dfgt dfgd ert4 gd fgg wr 235 wer3 we vsdf sdf gdf ert xcv sdf rwer hfd dfg cvb rwf afb dfh jgh bmn lgh rty gfds cxv xcv xcs vdas fdf fgd cv sdf tert sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf shasha9178 shasha9178 shasha9178 shasha9178 shasha9178 liflif2 liflif2 liflif2 liflif2 liflif2 liblib3 liblib3 liblib3 liblib3 liblib3 zhazha444 zhazha444 zhazha444 zhazha444 zhazha444 dende5 dende denden denden2 denden21 fenfen9 fenf619 fen619 fenfe9 fe619 sdf sdf sdf sdf sdf zhazh90 zhazh0 zhaa50 zha90 zh590 zho zhoz zhozh zhozho zhozho2 lislis lls95 lili95 lils5 liss9 sdf0ty987 sdft876 sdft9876 sdf09876 sd0t9876 sdf0ty98 sdf0976 sdf0ty986 sdf0ty96 sdf0t76 sdf0876 df0ty98 sf0t876 sd0ty76 sdy76 sdf76 sdf0t76 sdf0ty9 sdf0ty98 sdf0ty987 sdf0ty98 sdf6676 sdf876 sd876 sd876 sdf6 sdf6 sdf9876 sdf0t sdf06 sdf0ty9776 sdf0ty9776 sdf0ty76 sdf8876 sdf0t sd6 sdf06 s688876 sd688 sdf86