Miniprogram

最近给单位在做小程序，中间需要使用自定义字体。稍微梳理下整个过程。 起因 在小程序中是可以使用 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 加密，就省去了网络获取的问题了。 非常想知道青芒杂志咋弄的 哈哈。