qingshui33
0.01D
V2EX  ›  HTML

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

  •  
  •   qingshui33 · Nov 21, 2023 · 5612 views
    This topic created in 1082 days ago, the information mentioned may be changed or developed.
    需求:在 App 中支持生僻字输入

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

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

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

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

    请注意,在提取字体文件时,要遵守版权法律和使用许可协议。确保你有权使用和提取这些字体文件。
    totoro625
    totoro625
    Nov 21, 2023
    8
    我是全部手动提取的,我自用字体: 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
    qingshui33
    OP
    Nov 21, 2023
    9
    @chenluo0429 好的,这个等会试下看看
    qingshui33
    qingshui33
    OP
    Nov 21, 2023
    10
    @yanng 刚看了下,按照需求来的话,我们大概需要支持 7w 个左右的生僻字,然后后端给发了三个字体文件,加起来得有 60M 左右了
    qingshui33
    qingshui33
    OP
    Nov 21, 2023
    11
    @lisxour 这个也不太明白原生那边有的啥方法,😂
    qingshui33
    qingshui33
    OP
    Nov 21, 2023
    12
    @wuxidixi 范围是固定的,但是字数也确实很多,我看看能不能缩小点
    qingshui33
    qingshui33
    OP
    Nov 21, 2023
    13
    @sqlNice 可以
    qingshui33
    qingshui33
    OP
    Nov 21, 2023
    14
    @totoro625 好的,我看看哈
    yanng
    yanng
    Nov 21, 2023
    15
    @qingshui33 为什么需要这么多,你需要问这个问题。
    如果需要那么多,放 h5 肯定不行的,必须要放客户端。
    totoro625
    totoro625
    Nov 21, 2023
    16
    常用 6763 个汉字使用频率表: https://blog.sina.com.cn/s/blog_5e2ffb490100dnfg.html
    切片之后就会发现常用的 6k 字其实只有不到 1mb
    处理好 Unicode 编码范围,切 92 片是常用的办法,实在不行就 368 片
    qingshui33
    qingshui33
    OP
    Nov 21, 2023
    17
    @yanng 我也很想知道他们为什么要支持这么多,奈何人言甚微啊,放客户端的话,那在其中嵌套的 H5 该怎么使用呢
    qingshui33
    qingshui33
    OP
    Nov 21, 2023
    18
    @totoro625 好的,我看看啊
    lycpang
    lycpang
    Nov 21, 2023
    19
    能不能搞一个开关,毕竟大部分不需要生僻字把。需要的就做个弹窗让他等着下载
    qingshui33
    qingshui33
    OP
    Nov 21, 2023
    20
    @lycpang 这事情得看需求怎么说了
    lilei2023
    lilei2023
    Nov 22, 2023
    21
    不要全量的字库, 看看自己需要那几个字的,找个工具可以缩减一下
    qingshui33
    qingshui33
    OP
    Nov 22, 2023
    22
    @lilei2023 主要是他支持的字太多了,目前准备是先这样,后续让他们再缩小一下范围
    Ashes26
    Ashes26
    Jan 8, 2024 via Android
    23
    llej
    llej
    Aug 15
    24
    可以试试我的方案,支持字体的任意文字动态裁剪使用,这样客户端加载的字体包体积是很小的
    https://github.com/2234839/web-font
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Privacy   ·   Solana   ·   2131 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 77ms · UTC 02:52 · PVG 10:52 · LAX 18:52 · JFK 21:52
    ♥ Do have faith in what you're doing.