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

最新推荐文章于 2024-09-03 15:20:51 发布

userkang

最新推荐文章于 2024-09-03 15:20:51 发布

阅读量7.5k

点赞数 2

分类专栏：问题文章标签： H5 字体文案解决方案艺术字体

本文链接：https://blog.csdn.net/userkang/article/details/91884757

版权

问题专栏收录该内容

14 篇文章 0 订阅

订阅专栏

问题

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

那该怎么办呢？

分析

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

1、静态文案：

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

2、动态文案：

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

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

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

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

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

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

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

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

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

解决方案

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

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

这里说下我们的处理方式。

通过和客户端商量，我们将域名改成 localfile 作为请求本地文件的标示。不过这样需要客户端同学响应时修改头信息中的 Access-Control-Allow-Origin ，允许跨域。

后面的 fonts 和 nbfont.tff 分别代表文件类型和名称。

@font-face {
  font-family: 'nbfont';
  src: url('//localfile/fonts/nbfont.ttf');
}

2、客户端拦截请求并返回本地文件。这里只了解了 Android 的实现方式。

重写 shouldInterceptRequest：

@Override
public WebResourceResponse shouldInterceptRequest(WebView view, String url) {
    WebResourceResponse response =  super.shouldInterceptRequest(view, url);
    CLog.i("load intercept request:" + url);
    if (url != null && url.contains("localfile")) {
        String assertPath = url.substring(url.indexOf("localfile/") + "localfile/".length(), url.length());
        try {
        	// 如果有跨域，还需要添加修改头部信息的代码，具体可以看下 WebResourceResponse
            response = new WebResourceResponse("application/x-font-ttf",
                    "UTF8", getAssets().open(assertPath)
                    );
        } catch (IOException e) {
            e.printStackTrace();
        }
    }
    return response;
}