H5页面动态文案使用艺术字体的解决方案

问题

H5 页面的动态文案需要使用艺术字体，而通常情况下，字体包都是很大的，全部加载肯定是不行的。

那该怎么办呢？

分析

对于普通的 H5 页面需要使用艺术字体，我能想到的解决方案大致是以下几种。

1、静态文案：

• 直接用图片
• 用类似 font-spider 的工具将字体库过滤，然后引入。（如果字体库比较大）

2、动态文案：

• 硬着头皮加载整个字体库（对于移动端来说，如果字体包很大，体验肯定很棒 🐶）
• 和设计同学沟通，对于不固定文案的地方，看看能不能弃用艺术字体（看对产品的影响，通常从需求能解决是最好不过了）。
• 通过后端服务，将页面需要用到的艺术字体文案发给后端，让后端服务生成图片或者svg等，然后返回显示。
• 可能还有其他优秀的解决方案，还望分享。

这里就不讨论每种方案的优缺点了。

这里说下我们遇到的场景以及解决方案——客户端拦截请求返回本地字体包资源。

因为我们是 Hybird 开发，而且整个 app 的标题都采用了统一的艺术字体，最精彩的是标题是后台可配的。

客户端打包了一个完整的字体包（也不是很完整，过滤了常用的5000字，大概 1M，够用了），这样就可以支持艺术字体了。

但是H5就很尴尬了，请求服务端字体包，太大了。所以思路就是，能不能 H5 页面也使用客户端本地打包的那个字体包？

通过上面分析，现在需要解决的问题变成了 H5 页面访问客户端本地文件。

最先想到的是通过文件协议 file:/// 直接去访问，但是试了几次，没有成功。想到可能是存在跨域了。

后来想到大部分桥协议（scheme的方式）都是通过拦截请求的方式实现的，还有之前了解过客户端缓存 H5 静态资源的需求，也是通过拦截 H5 请求，然后对比本地缓存清单，决定是返回本地文件还是向服务端发出请求。

解决方案

经过分析，我们来梳理下实现。

1、h5 页面正常发出请求（通过 http/https 协议），为了客户端能识别出这个请求是访问本地文件，这里需要对请求路径或域名进行一些特殊处理。

这里说下我