通过FontFace减少动态加载分片字体CSS文件大小

若想使用中文特殊字体，目前主流方案是字体分片技术，@font-face搭配上unicode-range，该方案的css文件中会有大量重复的文本，有无可能进行删减？

该css文件核心目的是记录字体分配和字符unicode编码之间的映射关系，有无可能将unicode编码进行压缩？

• 去除相同字符
• VLQ编码

/** 获取CSS原始文件 */
function getCSSFile() {
    return new Promise((resolve, reject) => {
        fetch("https://fonts.googleapis.com/css2?family=ZCOOL+QingKe+HuangYou&display=swap", {
            "headers": {
                "accept": "text/css,*/*;q=0.1",
                "accept-language": "zh-CN,zh;q=0.9,en;q=0.8",
                "cache-control": "no-cache",
                'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/122.0.0.0 Safari/537.36'
            },
            "referrer": "http://127.0.0.1:8000/",
            "referrerPolicy": "strict-origin-when-cross-origin",
            "body": null,
            "method": "GET",
            "mode": "cors",
            "credentials": "omit"
        }).then(res => res.text()).then(res => {
            resolve(res);
        }).catch(err => {
            reject(err);
        });
    })
}

const res = await getCSSFile();

// 匹配每个 @font-face 块
const fontFaceRegex = /\/\*\s\[(\d+)\]\s\*\/[\s|S]*@font-face\s*{([^}]+)}/g;

let match;
const results = [];

function parseUnicodeRange(rangeStr) {
    if (!rangeStr) return [];
    // 拆分逗号
    const parts = rangeStr.split(', ');
    const nums = [];
    for (const part of parts) {
        // 匹配 U+xxxx 或 U+xxxx-xxxx
        const m = part.match(/^U\+([0-9a-fA-F]+)(?:-([0-9a-fA-F]+))?$/);
        if (m) {
            const start = parseInt(m[1], 16);
            if (m[2]) {
                const end = parseInt(m[2], 16);
                for (let i = start; i <= end; i++) {
                    nums.push(i);
                }
            } else {
                nums.push(start);
            }
        }
    }
    return nums;
}

while ((match = fontFaceRegex.exec(res)) !== null) {
    const block = match[2];
    console.log(block);


    // 提取 src 里的 url
    const srcMatch = block.match(/src:\s*url\(["']?([^"')]+)["']?\)/);
    // 提取 unicode-range
    const unicodeRangeMatch = block.match(/unicode-range:\s*([^;]+);/);

    results.push({
        src: match[1],
        unicodeRange: unicodeRangeMatch ? parseUnicodeRange(unicodeRangeMatch[1].trim()) : [],
    });
}


const BASE64_CHARS = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/';

function encodeVLQ(value) {
    let vlq = (value < 0 ? ((-value) << 1) + 1 : value << 1);
    let encoded = '';
    do {
        let digit = vlq & 31;
        vlq >>>= 5;
        if (vlq > 0) digit |= 32;
        encoded += BASE64_CHARS[digit];
    } while (vlq > 0);
    return encoded;
}

function encodeUnicodeArrayToVLQ(unicodes) {
    const sorted = [...unicodes].sort((a, b) => a - b);
    const deltas = [];
    for (let i = 0; i < sorted.length; i++) {
        deltas.push(i === 0 ? sorted[i] : sorted[i] - sorted[i - 1]);
    }
    return deltas.map(encodeVLQ).join('');
}

for (let val of results) {
    val.unicodeRange = encodeUnicodeArrayToVLQ(val.unicodeRange);
}

console.log(results.map(item => `${item.src}##${item.unicodeRange}`).join(','));
// 5##mu/DgBgBCGGaCCGCGCCCCCCCCCCCCCCCCCCCCCCCCCCEECCCCCCCCCCCCCCCCCCCCCCCCCCCCCEICCCCECCCEGCCCCCCCCCECCCGCCCCEGCCCCCIKCCCCECCiECCCCEGEEewg4D4WCiCCCCGCC4ECC,6##uq4DWKkBeEECGMKiBKGCEIgBgD+DSmEC6GsD4BwBmckE6VC+mBC2GSUESkCCOGUoCEEEIKICKGSISKsBGKIYMCYGCGmBSCOEOgPC0vBkBkCCECCCCCCCCCCCCCCCCCKCCCCCCCCCECCCECCCCCCCCCCCCCECCCmCIC2BUmBCoB,21##6zvCCGSCMCeCCGCyBCEECCCCCCCCGCGCCEGCEEEkFaM8BiCCgB2BMCUE2HwB0BEgM8E...

// 会生成类似上面的字符

getFont.js [20kb] 相较于css文件，减小了92kb大小，减小了82%，还是非常可观的。

const BASE64_CHARS = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/';
const BASE64_MAP = {};
for (let i = 0; i < BASE64_CHARS.length; i++) {
    BASE64_MAP[BASE64_CHARS[i]] = i;
}

// 还原 VLQ 符号
function fromVLQSigned(value) {
    const isNegative = value & 1;
    const shifted = value >> 1;
    return isNegative ? -shifted : shifted;
}

// 解码一个 VLQ base64 字符串为数字数组（增量解码，返回绝对值数组）
function decodeVLQArray(str) {
    let result = [];
    let i = 0;
    let value = 0;
    let shift = 0;
    let prev = 0;

    while (i < str.length) {
        let digit, continuation, vlq = 0, shift = 0;
        do {
            digit = BASE64_MAP[str[i++]];
            continuation = digit & 32;
            digit &= 31;
            vlq += digit << shift;
            shift += 5;
        } while (continuation);

        let delta = fromVLQSigned(vlq);
        let actual = prev + delta;
        result.push(actual);
        prev = actual;
    }
    return result;
}

// ...前面的代码保持不变...

// 数组转 U+xxxx, 区间合并
function codepointsToUnicodeRange(arr) {
    if (!arr.length) return '';
    arr.sort((a, b) => a - b);
    let result = [];
    let start = arr[0];
    let end = arr[0];

    for (let i = 1; i <= arr.length; i++) {
        if (arr[i] === end + 1) {
            end = arr[i];
        } else {
            if (start === end) {
                result.push(`U+${start.toString(16).toUpperCase()}`);
            } else {
                result.push(`U+${start.toString(16).toUpperCase()}-${end.toString(16).toUpperCase()}`);
            }
            start = arr[i];
            end = arr[i];
        }
    }
    return result.join(',');
}

const str = `5##mu/DgBgBCGGaCCGCGCCCCCCCCCCCCCCCCCCCCCCCCCCEECCCCCCCCCCCCCCCCCCCCCCCCCCCCCEICCCCECCCEGCCCCCCCCCECCCGCCCCEGCCCCCIKCCCCECCiECCCCEGEEewg4D4WCiCCCCGCC4ECC,6##uq4DWKkBeEECGMKiBKGCEIgBgD+DSmEC6GsD4BwBmckE6VC+mBC2GSUESkCCOGUoCEEEIKICKGSISKsBGKIYMCYGCGmBSCOEOgPC0vBkBkCCECCCCCCCCCCCCCCCCCKCCCCCCCCCECCCECCCCCCCCCCCCCECCCmCIC2BUmBCoB,21##6zvCCGSCMCeCCGCyBCEECCCCCCCCGCGCCEGCEEEkFaM8BiCCgB2BMCUE2HwB0BEgM8EomBIMCE8wCC8jBCGIQCECCCGGCO4ECGGCQCESIeCQCGIaIG4BCGIWEOCGYKWwB4BoBQIIWEWoDQoBIwBCGIQCEqCIIQUEQoBoF4BoFCO,22##0/uCgBOSIEEMCCCCECCCCCECCCCCCGECCCCECCCCCCCCGEECCCECCECCCCCGCCCCCCCCGEEGCGCCIICCGCICEEEMOCICUCGCCECCCIMIGECECGGCECEGECCCKEECEGECEaEGIGESOGGEME,23##2juCKOCCUIacKCGICECECCCCCCCECCCCECCCCCCCGCCCCCECCEEECGCCCCCCECCCCECGECCECCCCCCCCECCCCCCCECEECCEIKCICEMCKMCSSGQEeIIkBQGCECCWIEQIMKMG6BKIIQGEcQmBO,24##+ltCGGIEGOECCCGGGEECCCGCEECECECECCCCCCCGEQCCICGCEICCCCIGCECECOMEEOCECCKKEQCEEKECGKEKGCEECEKECSQGCCCICGKEEEGECaQSQGGGcCQECECECOiBCSGKaQCiBcKeSKO,25##wssCOCCCCCCCICEICKCCCEECGEQCCKEGEECMCIECGGOIEOGCICOMCKCECEOKGCCCECGKCECCICECECGGCECCCCECCECaMCCCGECQGEECCCMIEGMEIYIcEECUCECCMEaGKEKSKKGCIGEGC,26##0yrCGGaKEICOCSCCOECMCMGIEQCSCECECGEIKECEGCECGEkBKCOKIKSCGaGCECCECEIICCCCGCMECGIGCCGIICGUOCCECECECECOCEEIICCMCIIGEIECCCCICCICCGCECGCCEMEKIIKCEC,27##y7qCCCCCCCCCCCCCCCCCCECOCCESCOOCEGMECGCCECCCCCCCEECCECCECCEIOOaCCGCOWOCCCCEEEECIIECCIEGKGGEGCOECMEGCIEMCECGCCECCYEGGCIGECEEGMEKCCOMECGGEICEQc,28##uuqCCCCCCECCCEEEEECCEICECECGCCECCCCCCCECCCCCCEMCCCCCGCCCCCCCCCCECCCICCCECCCCCCCCECCCECCCCECCCCCCCCCCCECCCGCCCCeGGKCECEICKCCECCCCECCCCCCCCCCEI,29##ghqCCCCCCCCCCCECCCCCCCCCCCCCCCECICEGEIMMOCQQCEWCCCCCCCCCCCCCCCCCCCCCCCGCCCCCCCCECCCCEECIECIECCCEGECCCCCCECCCCIECCCCCCCCCCCCCCCCCCCCCGCCCCCCCC,30##urpCEQICEIIEkBMECGGKIQEUEGGEIECCEECCCECGECGCQECSCCCCCCCCCCCCCCCCCCCCCCECECCCCCCGOSIQEGICECGQKKCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCGCKCCMCECEoBGEiBC,31##40oCECCIGGGCGCCCKOEEKCGCICEOCGCSEKCCCIECCCCCKCGEIECKEGKEKCKMGCMGKIOKECCCGCEICOEGECCCCECGOCEECECCCCICCGKCEEIIGIECCEIGEUGEGECCCCCIGEGEICWGCCCKG,32##k+nCCCCGCKKCIEUOMICQGKOEEICGCOGCCIKCCCECGCECCCECCMCMGEECCCCECIEEECCCCIMEECCEGCOCGIECCEEEGCKCCECOCGEEGCCEIEECGCIKCEOCCIKGMECGIEEECIMECCCOCSGGC,33##6inCCCCCGCICGGCCKECCKCCCMCKCIKGIIEICCGKCEEEEECIKGEYEIMUMICCCCIQKGSaGCCCKMEOCCCMEEUCKOEGGCKCIICiBYEICCECECCEEGCEGGCECCKCECCCYOCCGGCCGCCGGSEMEEG,34##+qmCCGCECCCECCECCCCCGCEGIEQCEEECCECCEGOIEECOCECEGEICEKKcEECGKEGECECECCGIEEIGCEEKCGGIEiBYCGCIeOEIGEEGGEEKGCOCGCGGECKECICKCCCCCCCQEECEEEISCCIGKC,35##81lCEYGCEEGMGGOEIGMCMGECCGCCOCCEESCEMCECCECCEECGGICGCCECEEECGGGCECEEECKGECECCCCCCCECCCCGCEGCCECCECCCCSQCCCCCECCICCYMIOKEQGICGCEGCIKCECCKCCCCC,36##kglCCICCCICIECCCECEEGCEMEIECECCEEEECKEQEECGGECCCCCCGGCCECEECOWEGECGCCGGQCECCCECGCCEEMCGECQQGICICGEKCCGECGECGCEIECCKGEEEOEEEGCKEIOMKCEIIGGQCEE,37##ymkCCICGOICCGECCEOGCQOEEEEIGGGKIMCCCKCECCKGCCEECCEGIICECQCCEEICECCCMCCCGCCCMIMKEEEKEIWSCGGECCMIEGCESGEGEECIGIIGOMECQCISOGCCECCCKIEEOEIIEECIOE,38##oujCEGIECCCCCICEGKGCCCCGICCOIICEIKGGGGCGCCEKCWEECKEGCCCCEMEEGGGCCCIGGGQIGICCECKGCCEIEQGIEICMCSCEEKKEEICQECICEKCEMCCCGEIEEcCGCGECQEIIICEIEECIE,39##kziCECGCCEOEGMKGCEKGGCGCCGECEIGCCKKCEEKEGKGMEEECECESCCKGMMGGEOCECKCECCUKKCGGCCGCWEEaEIWIGcEGCCCMCGGKKEGIKCCGYEMSCIECGCCGGCCGCCIMIEGCGCCCCGIMC,40##o7hCEEEECECEGGCEMECCCEGEEEIKCKIICEEEEKICIEOIIECCEGGYCECGOCEKGCIGCEMIOECGGCCEGOCEEGEEGCGIGCEIGOKKCCCCCCECGCCGCEGCEGSCECECCOKGIEGCYKGCECOIECGEE,41##yqhCCCGEEECCMEECCECCCCECCEEECECECGCCECCCCGECCECKCGCECCCCCCCKCCICEEECCGECEOGGECEECCCMCCIGCCECEEGEKECCCCEEICCECCECCKKGCCECEMECOEEECECIECKCCICCG,42##60gCCGEKCCIEMCCCEEIECIICKMSOCCCKGECGaICEEEEGGCECIECIGCECMECCECECMGEEEECCEICCICCMCCGCKCCCECCGEEGCCGCECGMKEIUCKOEMGKCCCIEICICCGCCCCECECCOCCECGC,43##0//BIMEKGGCEEECGEQCCCCOGCEYQEKIGKGOCKCCCCCCECCICCCCEECGOISGYECGKCCICKEMGIGGECCEGICECCCCCCECCECQKGCECICCICCCECCECCCCECCCCCCCCCCCCCCCECCGEMCEIE,44##ut/BIKCCGCEGKCCIICGGCCCIECCCCCCCCKEECGECCECCCECCCCCCCCCECCMKECOCKEICIECCEEGQCECCEEICOCECECICGCCECCCEEIICCGCCCCCCEEEIGCGOEEIGICCIIECCEECECEECK,45##o8+BGCECCCEECEECCECCCCCCECCCCECCCCCEECCCCEEECECCCCEICCCOSGEECGGEGCEMECCCCCEGCECGCECGGCCECCCECGKCECCEGGIEECCICUCEGCCEEECCECEEEGCEECEWGECCOECII,46##4s+BCUKEEICECIIKCCCCGEEICCCCCCCEGCCCCGCCECCCCEGCCECCECCECEECECCMECCEKCGEGCCEGCEGCCGEECCGECCECCECIGGCCCCCCCEEEGEECCECCCCEIICCCCCCCGCCCCECCCCCE,47##m89BCEECCCCKECKCGGCGCCGCKKEMEGEICECCCEEICGKCCCECEECCCCCCCCCCCEECCCCECECEICIIGCKMCGCCOEIEKCEKCECGECCCCCCCECCCGECCCECCICCCGGCCCCECCGCCCECCCGECC,48##0s9BOCQCCCIGEcCCCGCECCCCCCCCCCCCCEECIECECKCCECCCICCECECCCCCCCCCCCGCECECCCGECCCCQEEIMCEGCCCGCCCCKCCEGGEICCCCCCCCCCCECECCCCGCCECCCCCCECCIGCCEKC,49##438BECCEICECCCCCIECECECCGICCCECCCCECCCECCGEKGIEOMCOCKICGEOGCEIICEKUGEGECIECMEECCICEGIEKEGCCCEIMECICGECEKQQKCCCEMGCCCEGCEECEKCCECCCCGKEGCCKCEC,50##8j8BGCCCGCCECECCCCCCECECWICGEOCKECEMCCUCICCCCCCGEEIIKEEGCEGIMEKCCEKCEEGICIEGECEMCGGCGEEECEEGMCCGCEGEICSEGEEGECECCECEECCCECCECCCEGCEEECEEIGEKE,51##+w7BGEEGCCGGCIEGCCCCCECCCCGCGCCIGCKCCCECMCCECCIGCECCECICQECCEKEICCECCEWCCEGQEKCCCMCCCEGEMSCECGCSGEGSGECEGGGMCCCGECECCCCCECCECCEECCCCCECEEECCC,52##0g7BCCCCECCCCCCCCCECCECCCGECCCICCECCCGCCECECECICKCIEIEEECECCEIGECECCECECCKEEKECCEECCGGECECCCEECCCICGCEECKCIGCEIGCCcCCGCCCCCCCCCOQCCEECGCGCICC,53##+u6BKWEEEGKEEEEEEQCCCCCCGECEKEIIEIGCCCCECECCCGCGCECEEEECCGCGCCCCEICCCECECCCGECCCCCEEEEGCGECGEGICGCECCGKICCCICCECOEGKEECCECCCCOCCIECEECCCEECEC,54##u+5BCCCICCEECEECECECCCEGCECCCCCSECCEMCGCGCCCCEGCECCCGCCCECCCEECOKIEGECCCECCCGEEECGGIGCEEECCCGCIKEECCCCGGGCIECCIECCGEEEEGEEGECECGCCCGCCEECECCK,55##6t5BCCEICEOCECCECECCEGCCCCGGCCOCCCCMCCCCCKEGCGCEECCEICEEECKGCCCEGEEMCECEGICECEECCEECECICGEEECCCCCCCEECCCEEECCCECCCEGIEGCESGCCCCGECCEIGECCCKEC,56##454BIICGOECCCCCCCCCCCEGCEICCCGCCEEKCEGCMCCEGCMEGECGCOKCGMICCCCKKGECEEQCCECCCCIKECIIEEECGICCIEECEECIGECGCEGGGEGSICOMCECCCCCECECCCCECEECEICCIIK,57##qg4BCGEEQGGECCIGCCIECCKEECECCMKCCIEOEECCGGEMiBGCICIKEGCGCGCEKKCKCCCECCCIKGIIGCKKCECGSGWGGEKICGIGCECCIEEcCEWMECCCECCKEGCGCEKICECIMCEEEGECIECCUM,58##wt3BCEEECEIIEECGCICCCIGEKCYCGSCCCGCCECEECICCOICCCEGGCEGCCCECCGCEGCCCECCCGCCCECCECCCCCCECCCGGECCGEEGCGQCCEGKEGEGQCCCCCCCCCCMCCEMGCCCGKECECCCSI,59##m82BECGGGGCGGCCCCCEIEECCEGCKCEEEOCGCCECEGEECGCCGCGGCCICUCECECCCCCGCEECCECGECCOCCCECCECCGCECCCECCECCIICCICEIEOEKCCEICCIMCEGICCECCCCCCCECGGCGCG,60##kr2BECEGECICCECCSCCCCECECICCIEGECCCCECICGIKCCECEEECCCECEECCEGGCGCCCEGCCGECECCEGGCCICIGEEECCECCEECECCEKCEMMCCUGIECCCCCCCCCCECCCCECIGCCEKCEEIGG,61##q41BCGIICCEECECGGCCCKCGECECOCCCGEIICCEECEGCCEOKMKECCIIQCCCKGKCCCCCOECCCGCCCCGCCCECCECECCCOICCECCIEGCCCEKICCEEEGCCICCEQCCCICGEECCCEEGKCCICGCCG,62##ig1BKGEMEICCEGKKCEICKGCCCCCCCCMCCECGEESGIGCCIcGECKEQECGGKEEEEKEGCCECEECECEEGCCEEIEICKCCCCGCICECmBSCQCCCCCCGCEWCOWCCEEMGQEGCICEKSIECGCGCCCMCCCC,63##iu0BECECCCCCCCECEEECEECCECCCICCGKUCCGCICKGOKGCCCCCCCCCKCOCCGEEEEGCCEECCCCECEECICIECKECCCGCMCCCCCEQCECIECGMICKECCEGCCCCECECGCCCMIEMCICCKECCECC,64##k5zBCGEMCCCIECCGCGCEEEEECICEECCCCCOCKCCICCGCCECCCOKECECECECECEGCEEIWCCGECCCCCECCICCCCMGECGCIKKECMCECCCEECCGIGEGQIGSYICECcKGCECCCECCCEEEEICEIME,65##0jzBCEIGCIGGKKEECECCCCCCCEECKEICCGICGCGCECCCEEGGEGECECGICMCGGCEGGKCCCGSCCCECCECCCCMCCEKEIGGKGKKCGEISCECCEICICGGEIKIICMEaKECCCEICEEGCCCKCIGCCCE,66##wvyBEEECIMMKIICCICCCKCCEECCECECEECKOCCECKCCECKOKEECCEEECECCCCCCGCCECGKCGCECKEECCEQCMICGCGCCECCECCIEEECGKEIEWCCGCCGGCECCGIEEKCQCECCGGEICCEECECE,67##47xBEEGCEEKCGKICGEGMCIIGCCCCCEECCMKCCGIECIKCCCECCCEOCECCCMCCCCCGGQCCSCCCCGGGKECCEIECCCCKCCCECIIGGCCCCGGKMCKCCCCCCECCGCCCGGECCKIGCEIECCEKGICCEG,68##2jxBECKGECGSIKECICIOSECMGGKMQECEOkBCIGEIECGCEMECGGCECGIGEICCkBECCCCEECIEEECCGIGQCECCCEECECCGIICCCMQCWCIECCCIICEKCIGCECGECCCCEEGCEECQCCGCCCCECCCC,69##0vwBMMOCIECIGIECGECCCCCCCCMCGGCMECGCMEKEECEEECCMCEGECCCCOIKGGCECGKCEGEECGCCECCKCECCGCIICECECCKCECGGKCCKQEEICCEECCEMCEEECKCCEEECCCCCCCCECMECCEM,70##i9vBCCCCCICCCCGCECKGCGCCGEGGCGCCCCIGEKKEKGGGEGCEEEIMECCGSICICCCECEGEEGCCSGCEEEIECCGEECGCECCICCKKECCEECCECCCEGECECCCGCCCEGKCGCCCCEICCCEIECCECGE,71##mqvBCCGGIIECGKGCCGEGCKCEKCCEECECKEEGCGCIGCECEMICCCECCEMQMCGCQCEGCCCCCCCCECCCCCECCEIECCCECCCCEEEECGGCGCCCCCCEICGCIECGIEEGCGEEMCCCGCEICCIGQKEGCC,72##kzuBCCQCCGCCCECCECGEEGCCCECCCWCECGKWGCCCCCCCECGGCMIqBICGECKCGCEGMEECCGCOUEIGICCCECOQEECKCCOGGEKCCECEGCCCEEIECCIGICGEEGCEEOCUEECIECEEEIMCIEGEGCC,73##q/tBCQICEECCECEEECEEEECECGGGECICOIQCECMGSECMCCEMEMICCCCCCEGCIGCCIGCCECGEGCCQCKIEGGCCEECGIOMCMCGCCCECCGEICEEKGCCCCEEGCCECCCCEECCCGCCCCCECCCOCCC,74##krtBECECCCGCCICECCECEECCCEICCEGCCCEEEECCCGCCCEICCEIIGGCKKCIMCEGCCCCCCCEEEECCMCCGEKCMCCGICOGEGCCCCECEOCICISIECCUMCMEUQGQKCGCCCCECCMECCCEECECCEC,75##i4sBcQCEECGCECGGCCCEGCECEEGCECECGCCCECEGGCECEECCCECCCCCECCGGEEECCISECCECICCECICMCCUCCGMIECCCCCCCEGECECCEECCOEEGCCGECKCECGCCCKCCCQEKGCKEEGCMICE,76##ijsBSGECCCECCEEGKKECECKMCGCECCCCEIICECOCCGKICCEECGCEGGECCCEGQCCCCGCECCCEEEGCCEGCKCGOGGECGECEGGEIECCCCEEIKEECEECCCGICEGIMEECCEQCGGKEOKCCEECCSIC,77##0wrBECEGCKCGEOEECEECKCIEMEEIGCeOKCEECEGEEICSCEIECICCICCCCCCCCECECCCCECECCCECCECICCGECCCCICEGGCCCCCCCCCGCECEIEEKCCCCICGCEEEEECCCGGKECCCCCECECMG,78##qgrBCEICEKECGEEGCCCCEEECCCCCMECCEICCOGCCCCGCCECCCCKGCEKICCECCCCCCCCCEMCCCKECCCCCEEICECECECCCCCGCCCEGECCOECCMIIGECCCIEEECCCECCCCECECCEECCGGCGCK,79##yxqBEECEECGCGCCIECCCECGCCCCCCECGCCEEGGECCCGCCCCQCCECCCCCCCECCCICECEEECEGCECCCEMCKMCECCCCEECCCGGCECCMECEGCCCCCCECCCCCCCECCEECCCICCCCECCCECCIGEC,80##2/pBCCCCCEGCCIIGEEECCGGCCCEICGCGCCGOEGCMECEGCCCEGECKECMCCCCCCCCEECCEICCCCCCEIGCECGGCCEEICCCCCCEEEOCIEGCGCMCCCGCGECGCECCIKYCICICCEGCCMCCCECCCEC,81##kqpBICKCEKCIECEGIKGGMCEEECEECEECCCCCCCCCECECCCCECMEOEECKKECIEGQCCCOICCEICMCCGIIKCCIKCGECGOCCEgBCEGCEKCCGCECCIICEECECCCIEGECCCCOCGCEKICECKCCQGCK,82##gxoBGEECECCECEOGCCICCCCECCGIEKKECCKCCCUOSaECCCECIIEICCGQCGCCCCCECGGQCEIICECECMEKCUECCCMIOGGGGGECOCkBEECMSCECKEEECEEWCCCCEECYGEEMEECCCCEEEEEECCO,83##m+nBCEEGCCMECEMGICGGGICCCCCGCCCICCCECGCCCEGCECCCEMCCECECCECCGEECCIGEECIGEICCECGGECEQCQCGECCCCCCCICECCEIMEEGIMCEGGIICIIOCMCCECEMCCGCCCCEECECCEE,84##wrnBCECCCICCICGGCEQCECCCCKCCCEGCICCGCCEIGCCGCEGICEMEICGECCECCCGCCGCEKECEICCWGCKCGCECEGICGECCCCCCCCCCECCEKCICCCCCCCCCCMGIICEOGCCKKGCOCECEOCCGCE,85##uyYCCQGGEQCGECGECcICECkCOKICCMCiICCCCCCCCCQuD+CEU2OCMOCCsCaCG+FwKkBgF+BSe6BcCYiCoNS6fmwC4DI+CiQkFwyC8oBudy6B+VECCMGMEQCCKGGGEIEKGCCCEECgBGCCQCEEIWOCCCGEGGMGECGECCECEWCECCC,90##2nQCCCCCCCCSCCIoBECCCCCEEGCGCCG8BEGGkCIUGCSCKKQM2FECCCOSCKIEKCSMEICCCCaKCCCuBEGCCCOECGECCICCCGEECCCCGMCCCKCWIMIUCKCGCGCmBCkBEEYWCQMMCyCqBGIOCCIECQwHECE,91##ozOCGCCEGCSKCGGMG8DIoCCoKU6CCCCCCCCCCECCEEEEEEEECECCCECGCCCCECCCCEECCCCCCCCEEECCCCCCEECCEIEyGyBsICECCGCECCCCCCGCIICCCEEECECCCECECEGIECICKICkBCeICCCCE,97##8qBCCCCCECCCCCCCCCCGCGCCCCCCCCCCCOCCEKCCEMGCCECCCCCECCCCCCGCCCCCCCCCCCIUMCCCCECCECECECCCCCCCCGCESUUECEEKIGicCCCCCCCCCCCCCCCC6BCGEEMGCCCCCCCCCCC,99##iKCCCECCEEGEECCCECCECCCCCCCCCCCCCCCCCCCCCCCCCCECCCCCCQKGCCKECGECCCEECCCMECCCGEEEGCEEECCECGECCCCCCCCCCCCCCCCECEEKCGCCCCKCCCGCCGCCGCCGCCCCCCCC,100##0hR0EggB4TwmFwgP0xBwC+KgEiRwUwBoBiBUwC4LyEUoEgG0FyFqB8B6PiYKIW2E0EamDmF2GgGsQgK8U4BsRQ8BwHoRa2LsCmDqC2EgC8PoBgBoIsOkE2F+B8FmDoRoF6GuB0K2OuFsCsNiCoB+JwMoBgCiRqXUa8BuX0IsFuFS0LC6E0P+E+NKqFiIMmDyCyM4GsDGyE6FkH+NgI8KuhBoB6CgBEY4GwD+HgG4B4F2DCkC4B2HgDsF0BkB6BOIwDiC6EC2DcwWIe2c8GuauUyD8qBsGyaoEyBkC6DiGayN+FmButB+EiC8C8B+J4BIyB4KsEuG6E8EmC4Cqe4B4Ccg2Bm+jB8vMcCC,101##iWq8DEiBMCa0sCWkC+hLoWOsZqqEaCsjPMuQsB8D0CkCuBSoVsFiG+TuR0BmFMsK+DSiCqGOGsNkOgBsVQuB2FiXQwEoIuE4YWIYyF2vB0GqByGoI2E+LCiB+PyE4E0EMwGwCgCsJ2H4JoIkCmHqJQsH4P6FqFwEkIkF2D+JcqJcmLuIW8FIgDqBw0ByB8FwCmIyEkOmE8JsSiG2PoIoFcoEoJwM2NsDmE4qBGyE2akICsD0BkGoIkEwZqJ8C6MOqOqXgHuhB2KgEkCwROkE+X6RmC6CgwBKgBiJCoBqJUsFgEiECEqDe6XwB6Na2NoBKkD4esvB4mjBCGEEigMmP4B+B,102##4Q2xCCCgBWMi/M0iB8wB+DspHCq9MgE4NqC2I4DuG4P2MoDgFkCYE4HyG+EoBKiB8FoL+CwHkB4PkD+EkDgF8RsDe0kBgDkHGgeiHqDkXkEmC4XuDgFiIoQ6qB0EmBiD6FMcsF8DyDgFsFkCuDqG2BobYGaiBiE0BU+P+EkJqDyFgC+C4fsW6Q6COgFkDiP4CuEwKqKS0CuCqBEUyNwPmC6DsD6D+EqGkF0MsF6C+CsB2eIsEkSoLyLwEYiF6NI2B0Lka2E0JqB6GkDG0kBuCQshB0BqGqOgGqKyawBoBqDoD6C8CIuBiCsFOwyBS2BmG2F4FsQyBi4BGkMuW4B0Bob4E6yjBKgwMGwCg/g4B,103##gGi9Cq9P8gFCuIqwBirNoHgMOiFiB4B+BkT8C2B8EgFsIY6M4EgO4CEoIOwL2JwLmI2UuHwEyVmCsE6GG8B2CiG2BgciFmEEgN8F8MgG8G0JiCY6BcG2ByEiByCqZkDqIkBuIwDUmBuNkB0C6H0BwEkIauFuZqE4SwB4E0FmC+H4GgF+ImIkFmBgCoCiCoB0CCwF6BKsO+FoBwDyIYMgFsB8SkCwDWkHgEuB8MyCWuGGyQkPgJkKa+M2bmRyCsCMuMsKoBsZ6NiF0ImL8HgX8IsDoN8OoDuP2XMoZkS0SiH8DwB+DuByjC6DuEC4BqGoCqB0GY0BqF2E4E0D6LsNyPiNyvBkJK6jwBC2O,104##mgQgZ+sBu7UkBWkHyCM0HkBgCoW2CqF6DkBmI4CqMuC8CkI8IG6BIUoBcgHqBoD0JiHoEuGeCsHwHwJmF8BgLoEyH8OyIwC6K2NiL8BkFSyHiQ8IYyX+Ke+J0XoBiD8EyDmB0Q+EqB4BuDsLiEkFoF6L2D2L6EiK2BkBoCkBM8dkEOwGuDwByXYyQuDiBcwH4gB2EyIoKmH+J6C2DqHsEuJ6DyDqMU+hCmESKG6TyEoI2FwDW4GwIgIYG4DyHiBkBwGU6DiGiG2D0SEg/BkPmCC6C2R0D8R8PmLgB+GIgLgBizB+BuEoDgNyI8CuH+E+FUsFiDKmOKQ6RoEmBkdmiBqyjBeEovMM,105##8FkzQ03BkLmBgkFukPmFoJ+C4BgCuC0F+ViHUuEYuEwNsGoEsBkCoDsCsBaqBiI+BkD6CO4E+CgQ+YoJiBUmPwE2P8GoB2LgNYiC8Q8DwLwGqGmGkH0EkByBiCoIcSoDOmBoC+BqIUqgB8CqB4UqGqDmBuE4BEgCmY+OmC8LwGuB8E4FwF8BUyDiF4OsCgU4EiBsC4HmrBuB0ByJe0JoM2B2EmI6FmM4LkGYkHW+FiD+coBsC+IwZkDyGgCoFsCuGQ4GwC+WgBwEiEsS6NkFsH+GyXoF0CsBuEuL8O0BkXQyBwPmBgFiK8WMoTkKmBQI8wBgB2HuGqHgEsHyD0e6JSqPgBygByZyH8sHukMw6Hm7U,106##gLiuQ+sBCqWwkF6gPmGuF6B8BckDsFSkHoNoIOiF6FqHgCQqDyBOyC4EoEqEUsBkIkByjB6U8J8HiDmEI0EoGyBsOiBuTmDwDyH6BuLK0H8EUgQqGkB0ByBuSiB6BuCsCgB6NiKUqFewEkHmDImEmC0T4EsB+SwD6qBgD4L+BEgDiE2DsHyC6B+E+BoB0GiI8NyFmBiGEuOIiZkHgCwc0BoLyOcoC2CaqImKuRyG+Es3BmF2BoB8CmGmBwB6ByCoIIECoJqCMmGmCiEyCyC2G+IsCiBmE0BkEQmFwCiFoUC+JmTiIoCusB0E+BIoRyKwM6O4JGoMi5BkBmFuPQ+QG2GmRyBo8C2TkmjBE,107##2gQwPqxWeCgBiCsD8B0BkSiF2EiMyGyEmL8ImC4BoBYiG4BgGqDEY0M8dIuG0GgF4MkDuF6JsOEsFasCkBkDQaO6BwEyV4DqLgCcwEY+K4DIKewBqH2BmSsCoCSkBaqEsCqC8BiD6PeYYkB8LiGqBkH6BuBuK2EqFKuB2GkDibQ+LqK6UoDsEoDoFemO8lBU2C4EuM8XkT+EOkEmqB4BkBmLqIuHuNgBm3BIiBgB6FKyEkE6LyGoEUuCoBmD2CkDuI2CiDqMoJgD8D2R0QkBoHwPqB25B6FiLkB8XsLyDQyFaMK4E6/BkHgB8E+LG+EoH4FEqDGgJ2J8sB8tBiOovjBECu1M,108##oCo+mB2DYiK0DqV6CesJ0G2DOqH4IoGuGWY2FuLqB6BsG2CsG+KwLiEgNkIoDyB4E8C+BwdqG2HoFkCwL6BuBqLqG6EgFqF8H0FegEa2BkG+H0EgB6DW8C+CshBsD4E6EgC2ByI2DyGoLoLokB6EqIsCyCyBgHwKgDkFGCyI0DK+G4YwUsDKkFuCcGmEuHwI6D+RsEuH0DgEwDkCkMgCoBuHI+W6JqL2F2OkDgfgDWwC4EiQgDqCI6P4EgKG8BUuLgBsGoLoH2FmCsKyC8E2DwLiLKg6BmBwEmNaCwBOSqLgUW4D+C4D6B2FuBuMwxBqCqBqEQiPmBiGgYmJgFyJmT25BMUiC+Qs5jB,109##qK63PgXmnC4gUiBgB2NE0FwIiMkKyImBiCwFsNuCCkC0I6CM2RyeO0F2F2BSyMqEgBgDyFkDI0LW6B2MgB2H8fgEqRwBsD6ByB0I4DYsGoMkHkEaCgSwD4EyBCoF2KmBuK0OiB2KE+E6G0BEsWyQuI8EwBgD6GiCqE4DGsEyKmHyC0YoByB0SgK+Q8CkIkLiBqM4QQyDmKyKkF0BsbkQyR4BuC+ciBQ6J0HwCuImBUsDQoCOM0GyRiC+Je2GiFoEiC+J6F6O2QgSM4Fsa0SgDmB6BmQIQG0B+GSyC0ByD8TEsBmCOmC0HiEqBM2hCqEqV+FwD0YqOoPMoC0D+0B4F4L0zjBoE4yM,110##4gYCukPI6D4C8GS2GuCoHmQGwDgFiCqFgHgCkBsS+Ce8EuFwH4fKwY4EiBIKkEgDyDqW2JyBK0HkBeue0C2DuHsC4CqEoJMM6D+XEMgGM0DyBW2BqF6JuFuCuIqHU2BgC2S2CmHa0Gq0BgGsHuCuD4Be2FciCcsCasD+OcuC8ViCgCcMoCiVCoMkBagIgCwMyF0BgJgKqToK+IkCsKeiImRqPyK0hBM0BIqJQ2E0FqH6B6BQkIgC4CiHmCSqEyPkByCsH2D2hBokBuB6KokBoBqDyHqJGkDU2CyCsH8TiCkBaqBsE2M+B4JkzB0EoPkE0BqBauIwZkRyMiBeoLy4BkF+9vBc,111##4knB4DyBK6CC2CiDuH6BmBsDkEuCCsQqBuDsCyEyByB6FwBgCuKEoEoC6Y0B6H0QqE2Na6DiP0DyE0C8QCgDMIgDmBoEciegEuDQ+H4BkBmFY6CSmBc2GgBuC0B8CsJmMU0B2BGyE6BmF4LyFY4RUsHwBkB4B0CsBcsIGwBsF6D0C+G8DiFwImK6CgWsNI2DW+BwB4B8BGgFmH+C+G6NgPoCyB+CkNyD0H6OmK2UkFqEeS2QK4IqYqHkI8mBkO0b0CuHsHgB+JuEE0RiGsIkLMiEkZwZqU0CsDmC6uBgCgEyS2BCkH6Z8BkCiEsDiBwCmQ4PupB2BoM4EgFqQoP+foM6tBuI6GiH09vB,112##mC0Bo8mBwD0D0FYiBgCqB4DqEmC4FyIkL2B2CgCiCG4BU0BsBgHOEqJWaiBMmCiIyBwE0G0CiCwNuOUyD4BkQGqEwC6GW6DgBqD6F4FqO8CgBSWkBC0DkBgDgB4cOgB6F2YqBsCyByPgGiNI0BYkC6BM6F6CiG2GiB0P6LmDmECsEkIgBCgGGyHyBgC2C8D+BshBemKoLwHoCoG6BYqE0NiDscuBQ+DgRmCmMkUqIuDEsBmBsJsY4qBoUmVkDqFqXyB+BgEiB0QuB0FC4D8J8RyEgFsN6IqbGSmlByTifmC6D8OmBqK6gBsCE2FkBCiFsKmFgzBOmTC+FmHiDiDkxB4BiBoJqUulB,113##sCsB2Ju3mBmBgB8EqCkE4O0ZIEKiGEMuBIoDsR0DsCMQGmB+CgJ6B0EqFkY6B6CU6iBCiDuBIoboBmE4BMG0DaI4EqF6OSEyBuHGiCiByEmE+JwCqCsC2CyMyRWIiDUmEOqCsGiBCyBgD4EekSEsEwDQgB2JgH2CcsCuByKkF+RglB8R2BYkE+HmCmIgPqE4LgTgRiCOoFG2FuFgVuV+EKqW4C+VO4DqCYwFuECuE2xBkIuH+UmF8DuBOsO2SmJ2HsiB8E87B+RKkEe4GmLkDmB+GkC2X2IsBKmE2T4D0rB0BqKqBsJkFSuHCmCcC2DuCO0RkCoH6FCse6sB0JqJ,114##8Hw6P69WkCWIiBwB4CqC0CyDQWgBqC0B0CwBkJqBoR4CmDwJ+O8BcS2FgEKImDiBuN4BkauBwDwI0BS6QaGY0DoBwIyF+QwBgCEyJM+DsWO8BIqEiDSwB2FgF+CoHqNsByZ4E0DgNqHyI8GkI4CiH0F0E0CwBE4DwDyFuJ0B4Ngb0BqBkFc6FeE0GMyCgFYiBuQ0WqLiZqFuG2SwX4CM8CyOmCcqVoTyB+D+LEoG+CqX8JwYIKegCwBwFoK+FuE2YmKsB8HY8WgrBmLuBYEiwB4EwCuCO8DyNsBsCGqE4Dob0EmBOMGuE2Q60BkCqDgVEiCmD8E+PkJG+BmNsBsvBgC,115##qC++mBSgCYuB0DwBmBwD+DmB4DoD0F4SMgCEOIG8BEwBEkFWOIkK4HQIGiCKoHciByCiF2CqC6BoEscmFoBwS2BmJsBeC2TiNgCiCeyBwEMmCGKyBsZ8HmC2OKkDgCsE8kBoB0EI4D8J8ZwGEsByKYiJgBmDiDEeO0IuBCmU2a2DmFwM4BqL4B+LMkLmDuB24BsD2J4aQ+YcyC2DiLMiCwS+HMuBuBY2H2JmEEiEgD4K6K0Y8BqBgBewKwKYoHqE6GiPoJ0T44CSgd6BUIyB4D+DiMICmGqeYQcwC2BQsC+qCwGoNkDmBCYgFC8Cwbc0F0KiB2yCulwB,116##2CqBg8XUC2gPgFUiCCEOqCUuDsBC8CQ6EmF8EyC0GgHSqEyD0BuDuICkKckBqC4DMIWC4CaMgBiEoT4MwHEWmF0LiPyBsCiKsGuSqEyC2K6WmBuB8BQqGIgC8FW0BwCO+BG0DyEigBSuC+DY0BuDc8B2FY+T4IMS4C+JkByBiD2LsCoD6pB6RuC0GkE8E4OsK0nB4PqO+T8BMoFoTqBaoSmM8SgPiDiG+P+ImDivBI8BEOewB+Q+KiUCsDgFuHsM8G65CMieeceaGQsBgSUO4DmE2gBgBGamC8BCmI0K0HuzBE8CuNgE6BE4JkFYqJsIayF6YgCqkCwM,117##8E88PCm/HCs/OqBQ0BUQe4CCwBOC+BGQamBCIqCqD0C8F6HyOMIoCMqB+GgCcE8H4FkBuDOEGyB4C4BeGSaOMwG8OqZ+FiFmEkS6BuC+DoeqDYiCmEUWgCoC6ZiBmH8BsGuHsCoFsB0DwL4CuPuDMkE4GiJ0ImRe2BgEsIgQgBkDoIkCgDKY0tBkEgHgEgCc+FgKsDiB6HmDwFsqB2PgwB6UgHM2CkOyTmJ8D+GiFqB4EoFiC6RoGqY4CMMuDwFmJWsmBgB+C+J21C0B0LkEG+B6BiaGUCCcGGuD6SiB8Dc0G4L2LMiBmFyDqK+E+MCE4iCqFsH2c6DilzB,118##aiDiC6BoCSg2mBCCECKOgBgBCgB2DQyBmB2CO8CmDMSIiIoYGIOGeqHY0CMuB8EKCO8GoCiJM8BQCgBICC4DkEqD6hB+BC0CQudeIaEoFK8csBmCiBIIoBmEsBsd6BsD2DCWuC0FeoEEyFqBoGwEyD6B0EiQCsCSWqDqCgQGwCsW0DuBkDuCsBwB+BEqMYa+BcSkCuD8IuvBkEwV0BmBmFk7B0VCiCgBuTsFyRSasU6HmB0NyVmJwQgHkTgIocgB+LuH+EyK6Oq+B6nB4ByRqEofmCuBG6UmoBiBCE+DyDqJyO86ByGMM8WmRmC8PkUyiyBOC,119##gCCCKCCCECCCCCCCCCCCCCCCIECCCCCCCCCCCCECCCCCCCCCCCCCCICCCCCCCCCCCCCCCCCCCCCCCCCCE8CGIKIoCCCCCCCECCCECICCCEGCEKEgBwB6BK8BmGEgTC87NQ4UCqCCwO+tHCgEEEEECCCCCCCCCCCEECCEECCECCCCCCCCECCCCCCECECEGCECCCCCCCCCCCCEGCcCCCECCCCCCCCCCCCCCCCCCCCCEECCECECCCCCECCCCCCCCCCECCCCCCCCECCCCECCCCEIQCowO6Cm4LqDmSCg7E28C6sE27/BEY`


const d = str.split(',').map((item, index) => {
    const [i, s] = item.split('##');
    return new Promise((resolve, reject) => {
        const a = new FontFace('ZCOOL QingKe HuangYou', `url(https://fonts.gstatic.com/s/zcoolqingkehuangyou/v15/2Eb5L_R5IXJEWhD3AOhSvFC554MOOahI4mRIjv26c8edRypRKQigTHJo1arEg5kCiDeVmDx-DipkKOYp7jhvzQ.${i}.woff2)`, {
            fontStyle: 'normal',
            fontWeight: 400,
            fontDisplay: 'block',
            unicodeRange: codepointsToUnicodeRange(decodeVLQArray(s)),
        })
        document.fonts.add(a);
    })
});

业务里使用方式

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <style>
        div {
            font-family: "ZCOOL QingKe HuangYou";
            font-size: 30px;
        }
    </style>
    <script src="getFont.js"></script>
</head>

<body>
    <div>你好阿迪发多少</div>
    <script>

    </script>
</body>

</html>