前端H5特殊字体技术方案预研

背景：应用宝8.0设计将加入特殊字体，这将影响安装包大小和网页加载性能，故针对该UI设计改版预研对应的解决方案。

客户端内嵌页

flow.jpg

对应的关键代码：

@font-face {
        font-family: font;
        src: url('**injection**');
 }
 body {
      font-family: font;
      line-height: 24px;
      font-size: 14px;
} 

其中**injection**为与终端约定的伪协议。

最终Demo页面效果图如下： Screenshot_2018-08-03-19-49-39-22.png

端外运营类活动

font-spider-plus（字蛛+）是一个智能 WebFont 压缩工具，它能自动分析出本地页面和线上页面使用的 WebFont 并进行按需压缩。

image.png

可以查看Demo效果，原始字体库文件大小由2.45MB压缩到了26K.
但其也有不足：

• font-spider-plus 压缩的源文件必须为ttf格式的，如果是其它格式请先用FontCreator转为ttf格式；
• FSP可以支持后台传的动态文案，但是不支持带交互变化的文案，如点击按钮后触发的文案变化；