关于javascript:微信小程序引用字体包太大使用fontspider字蛛裁切字体包

18次阅读

共计 1769 个字符，预计需要花费 5 分钟才能阅读完成。

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
最初编译进去的就是我须要的字体包，其实并没有在小程序外面编译，这是我在小程序想到最好的方法了，有更好的办法敌人能够分享进去学习一下。

正文完