likes
comments
collection
share

微信小程序引用字体包太大，使用font-spider（字蛛）裁切字体包

作者站长头像
站长
· 阅读数 378

1.字蛛的安装，这位前辈写的蛮好的: 安装

  1. 网络上找的都是html的压缩方法，我做的方法也是先在html文件里编译好，然后把编译的字体包放到微信小程序里面，我用的笨方法，将我小程序里面的每一个wxml代码都复制到我的一个html文件中，用字符串的方式引入，然后用正则过滤出汉字，最后去重：
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>正则提取字符串中纯汉字</title>
</head>

<body>
  <script>
    var nores0val = `<view>我是小程序的文本</view>......`
    // JS 正则提取字符串中纯汉字
    let reg = new RegExp('[\u4e00-\u9fa5]+$', 'g');
    nores0val = nores0val.match(/[\u4e00-\u9fa5]/g).join('');
    // 字符串去重
    nores0val = [... new Set(nores0val)].join("");
    document.write(nores0val);
    console.log(nores0val.length, '文字长度');
  </script>
</bod>
</html>

3.把生成的文字复制到新创建的index.html文件中，这个html目的就是通过字蛛插件导出我需要的字体包：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>展示字体包加载的文字</title>
    <style>
        @font-face {
            font-family: 'LV_Global_Demi';
            src: url('./LV_Global_Demi.ttf') format('truetype');
        }

        @font-face {
            font-family: 'LouisVuittonGlobal-Regular';
            src: url('./LouisVuittonGlobal-Regular.ttf') format('truetype');
        }

        * {
            font-family: 'LV_Global_Demi', 'LouisVuittonGlobal-Regular';
        }

        .test1 {
            font-family: 'LouisVuittonGlobal-Regular';
        }
    </style>
</head>
<body>
    <div id="texts">
        ， 、 。 ． ？ ！ ～ ＄ ％ ＠ ＆ ＃ ＊ ? ； ︰ … ‥ ﹐
 ﹒ ˙ ? ‘ ’ “ ” 〝 〞 ‵ ′ 〃 ↑　↓　←　→　￥
        ˉˇ¨‘’々～‖∶”’‘|〃〔〕《》「」『』.〖〗【【】()〔〕{｝[]~||
        ⅠⅡⅢⅣⅤⅥⅦⅧⅨⅩⅪⅫ
        ≈≡≠=≤≥<>≮≯∷±+-×÷/∫∮∝∞∧∨∑∏∪∩∈∵∴⊥‖∠⌒⊙≌∽√
            °′〃$￥
            abcdefghijklmnopqrstuvwxyz
            ABCDEFGHIJKLMNOPQRSTUVWXYZ
            0123456789
            ':;`：¡¢£¦«»­¯´·ˊˋƒ‒―‚„†‡•″‹›◦（）!*
            我是小程序的文本
    </div>
    <script>
        var text = document.getElementById('texts').innerHTML.length;
        document.write(`<p><hr>文字个数：${text}</p>`);
        console.log(text, 'text')
    </script>
</body>
</html>

4.然后在项目中的根目录跑命令： font-spider ./index.html最后编译出来的就是我需要的字体包，其实并没有在小程序里面编译，这是我在小程序想到最好的办法了，有更好的方法朋友可以分享出来学习一下。

转载自:https://segmentfault.com/a/1190000042287434
评论
请登录