likes
comments
collection
share

微信小程序引用字体包太大,使用font-spider(字蛛)裁切字体包

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

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最后编译出来的就是我需要的字体包,其实并没有在小程序里面编译,这是我在小程序想到最好的办法了,有更好的方法朋友可以分享出来学习一下。