[blog-MT-06] - 将 TTF 字体压缩至几百 KB 的 woff2 字体, 一套网页字体轻量化的完整解决方案

// scripts/subset-font.mjsimport fs from 'fs';import path from 'path';import crypto from 'crypto';import { glob } from 'glob';import { JSDOM } from 'jsdom';import subsetFont from 'subset-font';// 字体存放的根目录const fontRoot = "public/fonts";// 构建后 dist 文件夹内的 fonts 目录, 用于额外清理const distFontRoot = "dist/fonts"// 字体子集的输出目录const outputDir = "dist/_astro/fonts";// 字体类型配置, in: 字体的输入格式, out: 字体的输出格式const fontTypeConfig = {in: "ttf", out: "woff2"};// font listsconst fontConfigs = [    // family: font-family,     // file: 完整字体的文件地址, 相对于 fontRoot, 不要添加后缀名,     // weight: 字体的字重, 控制字体粗细,     // style: normal, 正常, italic, 斜体    { family: 'Yozai'                   , file: 'yozai/Yozai-Regular'                            , weight: 400, style: "normal", },    { family: 'LXGWWenKaiMonoGB'        , file: 'lxgw-wenkai-gb/LXGWWenKaiMonoGB-Regular'        , weight: 400, style: "normal", },    { family: 'JetBrainsMono'           , file: 'jetbrains-mono/JetBrainsMono-Regular'           , weight: 400, style: "normal", },    { family: 'JetBrainsMono-Italic'    , file: 'jetbrains-mono/JetBrainsMono-Italic'            , weight: 400, style: "italic", },];// 收集 html 中的所有文本字符。async function collectChars(dir) {    const htmlFiles = await glob(`${dir}/**/*.html`);    const charSet = new Set();    for (const file of htmlFiles) {        const html = fs.readFileSync(file, 'utf-8');        const dom = new JSDOM(html);        const text = dom.window.document.body?.textContent || '';        for (const c of text) charSet.add(c);    }    return [...charSet].join('');}// 计算最终字体子集的哈希值, 并保留前 16 位结果。function contentHash(buffer) {    return crypto.createHash('sha256').update(buffer).digest('hex').slice(0, 16);}// 主处理流程async function run() {    console.log('🔍 Collecting characters...');    const chars = await collectChars('dist');    if (!chars) {        console.warn('⚠ An empty result is returned, skipping.');        return;    }    console.log(`✅ Collected ${chars.length} characters.`);    // 确保输出路径存在    if (!fs.existsSync(outputDir)) fs.mkdirSync(outputDir, { recursive: true });    const hashMap = {}; // family -> hash    for (const { family, file } of fontConfigs) {        const inputPath = `${fontRoot}/${file}.${fontTypeConfig.in}`;        if (!fs.existsSync(inputPath)) {            console.error(`❌ Full font file is not exists: ${inputPath}`);            process.exit(1);        }        const fontBuffer = fs.readFileSync(inputPath);        console.log(`⏳ Generating subset font for '${family}' ...`);        const subsetBuffer = await subsetFont(fontBuffer, chars, {            targetFormat: `${fontTypeConfig.out}`,            preserveNameTable: true,        });        const hash = contentHash(subsetBuffer);        const outFile = path.join(outputDir, `${hash}.${fontTypeConfig.out}`);        fs.writeFileSync(outFile, subsetBuffer);        console.log(`   → ${hash}.${fontTypeConfig.out} (${(subsetBuffer.length / 1024).toFixed(1)} KB)`);        hashMap[family] = hash;    }    // 替换 css 中的占位符    console.log('🔄 Replacing placeholders in css...');    const cssFiles = await glob('dist/**/*.css');    for (const cssFile of cssFiles) {        let content = fs.readFileSync(cssFile, 'utf-8');        let replaced = false;        for (const [family, hash] of Object.entries(hashMap)) {            const placeholder = `__FONT_HASH_${family}__`;            if (content.includes(placeholder)) {                content = content.replaceAll(placeholder, `/_astro/fonts/${hash}.${fontTypeConfig.out}`);                replaced = true;            }        }        if (replaced) {            fs.writeFileSync(cssFile, content);            console.log(`   ✔ Updated: ${cssFile}`);        }    }    // 额外操作: 清理 dist/fonts 文件夹    if (distFontRoot && fs.existsSync('dist/fonts')) {        fs.rmSync('dist/fonts', { recursive: true, force: true });        console.log('🗑 cleaned dist font');    }    console.log('✨ Font subsets generated done!');}run().catch(err => {    console.error(err);    process.exit(1);});

// pages/fonts.css.tsexport async function GET() {    const isDev = import.meta.env.DEV     // 完整字体和子集字体的格式    const fullFontType = "ttf";    const subSetType = "woff2";    // 字体配置, 可直接从脚本中复制过来    const fontWeights = [        { family: 'Yozai'                   , file: 'yozai/Yozai-Regular'                            , weight: 400, style: "normal", },        { family: 'LXGWWenKaiMonoGB'        , file: 'lxgw-wenkai-gb/LXGWWenKaiMonoGB-Regular'        , weight: 400, style: "normal", },        { family: 'JetBrainsMono'           , file: 'jetbrains-mono/JetBrainsMono-Regular'           , weight: 400, style: "normal", },        { family: 'JetBrainsMono-Italic'    , file: 'jetbrains-mono/JetBrainsMono-Italic'            , weight: 400, style: "italic", },    ];    const fontFaces = fontWeights.map(({ family, file, weight, style }) => {        const url = isDev            ? `/fonts/${file}.${fullFontType}`            : `__FONT_HASH_${family}__`;        return `@font-face {    font-family: '${family}';    src: url('${url}') format('${subSetType}');    font-weight: ${weight};    font-style: ${style};    font-display: swap;}`;    }).join('\n');    const css = `/* 自动生成的全局字体声明 */${fontFaces}/* (保留内容) 可以继续添加 css 样式 *//* 应用全局字体 */* {    font-family: 'JetBrainsMono', 'JetBrainsMono-Italic', 'LXGWWenKaiMonoGB';    line-height: 1.5rem}`;    return new Response(css, {        headers: { 'Content-Type': 'text/css' },    });}

// scripts/split-font.mjsimport fs from 'fs';import path from 'path';import { fontSplit } from 'cn-font-split';// 需要分片的中文字体 (拉丁字体体积小, 继续走 subset-font.mjs 的内容子集即可)const cjkFonts = [    {        family: 'LXGWWenKaiMonoGB', // 与 fonts.css.ts / 全局 font-family 保持一致        file: 'public/fonts/lxgw-wenkai-gb/LXGWWenKaiMonoGB-Regular.ttf',    },];const distRoot = 'dist/_astro/fonts';async function run() {    for (const { family, file } of cjkFonts) {        if (!fs.existsSync(file)) {            console.error(`❌ 字体文件不存在: ${file}`);            process.exit(1);        }        const outDir = path.join(distRoot, family);        const input = new Uint8Array(fs.readFileSync(file).buffer);        console.log(`⏳ 分片字体 '${family}' ...`);        await fontSplit({            input,            outDir,            css: {                fontFamily: family,                fontWeight: '400',                fontStyle: 'normal',                fontDisplay: 'swap',                localFamily: ['LXGW WenKai Mono GB'],            },            chunkSize: 70 * 1024, // 单个分片目标大小 (~70KB)            testHtml: false,            reporter: false,            silent: true,        });        // 清理辅助文件, 只保留分片 woff2 和 result.css        for (const name of fs.readdirSync(outDir)) {            if (!name.endsWith('.woff2') && name !== 'result.css') {                fs.rmSync(path.join(outDir, name), { force: true });            }        }        console.log(`✅ 分片完成: ${family}`);    }}run()    .then(() => process.exit(0)) // 规避 cn-font-split Rust DLL 卸载时的访问冲突    .catch((err) => {        console.error(err);        process.exit(1);    });