微信小游戏包体限制4M,一个字体就11.24M,怎么玩?

image

引言

哈喽大家好,很多时候,我们的游戏项目为了美观和保证风格的统一,都会用到外部字体库。

但是,外部字体库通常是完整的字库,体积非常的大,例如完整的simkai字体库就达到了11.24MB

image

要知道,现在的微信小游戏限制主包的大小不能超过4M,即使你把字体放在分包,占去近50%的代码包大小,想想也不太合适。

image

因此,我们如果想要能够顺利地在游戏中用上漂亮的字体,那我们得想办法将字库瘦下来。

言归正传,本期将带小伙伴们一起来看下,如何将我们想用的字库从11.24M瘦到不到1M

本文源工程可在文末获取,小伙伴们自行前往。

精简字库原理

据了解,一个完整的字库估计有3~4万个汉字,但实际上我们游戏项目需要用到的可能只占10%~20%,甚至更少,像其中的一些汉字囧、烎、嫑、勥、忈、巭、怹、颪、氼、兲‌,别说用,笔者连读都不会读。(会读的小伙伴请打在评论区,我给你点赞)

游戏项目中,用到文字的地方通常包含下面几个:

因此,要瘦身字体,按照以下2个步骤即可:

  • 1.通过工具将上述地方的文字提取出来。
  • 2.通过工具从字库中的保留我们提取到的文字,其余的删除。

精简字库实例

1.提取中文字

要提取中文字,我们只需要按照上面的原理,遍历我们的游戏项目中的游戏配置预制体场景代码进行匹配即可。

其中遍历文件,笔者使用的是glob

匹配中文字的正则表达式是/[\u4e00-\u9fff]/g

image

2.精简字库

这里我们使用百度出品的字体子集化工具Fontmin。可以直接通过npm install fontmin进行安装。

640 (1)

工具的使用也非常简单,通过传入原字体保留的字符字体输出目录,最后通过fontmin.run这个API生成即可。

image

3.效果演示

通过node font-minifier.js --project=C:\Users\Administrator\Desktop\demo --source=C:\Users\Administrator\Desktop\simkai.ttf传入工程目录和原字体路径即可。

640 (2)

执行结果可以看到扫描的所有文件。

提取到的所有中文字。

生成的文件及其大小。

精简后的字体大小为802K

image

更进一步

除去我们遍历出来的游戏设定的中文字,其实还有一部分中文字我们是不确定的,那就是用户自定义的内容,例如名字和聊天文字。

想要处理这一部分文字,我们只能通过预设,猜到用户会自定义的内容,从而预设保留,可以通过网络上分享的常用内容来完成。

此外工具可以集成到插件或者打包系统里面去,这样后续就不用考虑相关问题,自动生成所需字库即可。

结语

通过上述方法,可以将字库大幅度精简到能够使用的状态,但是也会有一定的瑕疵。

不知道小伙伴们有没有更完美的办法呢?

本文源工程可通过私信发送 fontminifier 获取。

更多实用源码可以通过亿元Cocos小游戏实战合集获取,感谢支持。

15赞

mark!!!!!!

牛啊,超级有用,收藏了

有很多现成的工具的 都是界面操作的,不用还非得下载个库的,再去命令行执行个命令 多麻烦,

请教下,如果是那种显示微信userName的地方,字体怎么精简?

系统字体?

文中更进一步部分,可以提前预留一些

在ios中微信小游戏指定字体无效怎么办???怎么解决呀???

这里绕开了:聊天字库的处理方式!

直接系统字

:wink:
其实可以考虑自己整合一个jszip形式的流去注入引擎,总有些无法裁剪的文件,那样就非常省空间了
实测:
20MB的包,可以压到10MB以内,配置越多,压缩率越高

我之前也借助AI写了一个从原始ttf文件中支保留常用汉字的python脚本。最后生成的tff文件是 990kb。
可以分享给大家。
将原始文件放到这个地方。然后运行 cut_down.py即可

font_process.zip (3.0 MB)

1赞

mark!

先回标题的。
正常来说这陷入了个问题中。你那理解是整个项目包体大小了,不走远程资源的吧?
正常来说微信可以远程加载的资源,主要就首包的图+代码进包就好了。
剩下的字体、图片、音效、等资源,全部走远程加载的,这样你字体几十M都没事。

不过话又说回来了,一个字体11M确实大的离谱,正常都是在2-5M左右的字体。
有很多字体优化技术的,微信支持woff、woff2格式的,可以压缩字体更小。

我记得我以前搞的那项目使用的字体大概是4M多,压缩转成woff这些格式后最后1M都不到。

正常字体不会超过1MB