微信小程序自定义字体
最近给单位在做小程序,中间需要使用自定义字体。稍微梳理下整个过程。
起因
在小程序中是可以使用 font-family 属性的,但是官方没有给出有哪些 font 是可以选用的,所以我们无法知道小程序到底可以支持哪些内置的字体。自定义字体就成为了一个问题。
小程序本身不支持将字体拖进去,然后通过引用的方式来使用字体。即使可以,一个思源字体随便都 10MB,拖进去之后整个大小就超过了小程序的 2MB 限制。
在网上查找之后还有一个方案,就是使用在线的 transfonter.org 将字体转换成 base64 的方式。有使用 base64 的方案,但是还是会超过大小。而且 transfonter.org 对字体的大小本身还存在限制。这就是很麻烦的一件事情。
解决方案
那么如何解决呢?我这里提供两个方案。
一是通过在线应用 url 的方式。
这种方案就是将字体文件存在文件服务器上,通过地址的方案引到小程序中,比如我下午使用的 http://o9791noio.bkt.clouddn.com/songti.TTF 这个网址,是七牛的,可以使用!而且这种方案在 zanui-weapp 的 issue 是有人提到的,链接是 使用”单元格”时,icon无法使用,但是我在真机测试的时候不可以,没有具体排查。我觉得问题的原因有两个,一是网上有些资料说 iOS 必须使用 https,二还是最根本的字体大小的问题,如果字体太大,模拟器就会有错误提示,真机在最开始如果没有加载也会非常麻烦。总之这个方案目前是被我 pass 的。
二就是下面我现在使用的我觉得合理的方案。上 字蛛。当然这个也不是最好的解决方案。
根据我的需求,我需要的个性化字体都是写死了,就是不需要网络加载。那么就可以采用字蛛对字体进行压缩。字蛛会把 html 中用到的字进行提取和压缩,用不到的就 pass 掉。这样会给原来的 ttf 文件进行一个强力的压缩,比如我压缩之后整个 ttf 文件的大小就变成了 8kb。这个效果还是显而易见的,这个时候再采用 transfonter.org 将字体转换为 base64 就可以了。
脑洞
那么假设一下一个情况,如果需要的是动态字体怎么办?
虽然我暂时还没有这个需求,我想到的方案是,首先后台会将专门的字体进行一个标记,那么在标记之后,使用 font-spider 将原字体进行压缩,再使用 url 获取的方式来动态加载,由于这个时候的字体文件很小,那么就不会有字体太大手机端加载不出来的情况。
或者就是直接把常用字进行 base64 加密,就省去了网络获取的问题了。
非常想知道青芒杂志咋弄的 哈哈。