在前端开发中，字体文件的加载速度往往直接影响到用户体验。当字体文件过大时，页面渲染速度会显著变慢，导致用户等待时间过长。最近，在开发海报编辑器时，意外发现字体文件过大导致加载缓慢的问题。今天，我们将一起探讨如何通过技术手段将20M+的字体文件压缩到几KB，从而显著提升页面加载速度。

一、问题背景：字体文件为何如此之大？

在开发海报编辑器时，发现某些字体文件过大，导致页面加载缓慢。具体来说，一张海报中包含6种字体，其中最大的字体文件超过20M，最长的网络加载时间接近20秒。这严重影响了用户体验。那么，为什么字体文件会这么大呢？

1.中文字符数量庞大

中文字符数量远多于英文。英文只有26个字母加上一些符号，而中文（全字符集）包含70,000+字符。这意味着字体文件需要为每个字符存储独立的矢量轮廓数据，而汉字笔画复杂，每个字符需要存储数百个控制点坐标。

2.字形结构复杂

汉字的笔画复杂，每个字符需要存储更多的控制点坐标。例如，“龍”字的轮廓点数量可能是“a”的10倍以上。这使得字体文件的体积显著增加。

二、常见的字体格式及优化方向

常见的Web字体格式包括TTF、WOFF和WOFF2。其中，WOFF2格式在TTF/OTF基础上添加了压缩和Web专用元数据，支持增量解码，可以显著减少文件体积。

1.TTF文件

TTF文件体积较大，例如思源黑体的TTF文件为16.9MB。

2.WOFF2文件

WOFF2文件通过压缩和Web专用元数据，可以显著减少文件体积。例如，思源黑体的WOFF2文件为7.4MB，压缩率约为60%。

三、优化方案：字体子集化与按需加载

为了优化字体加载速度，我们可以采用以下两种主要方案：字体子集化和按需加载。

1.字体子集化

字体子集化是指通过工具将字体文件进行提取，返回指定字符集的字体文件。其核心是减少单次资源请求的体积。这种方法适用于所有优化场景，尤其是动态子集化方案，可以显著减少字体文件的体积。

实现动态子集化

使用了Python的fontTools库来实现动态子集化。以下是实现代码的示例：

from flask import Flask, request, Response
from io import BytesIO
from fontTools.ttLib import TTFont
from fontTools.subset import Options, Subsetter

app = Flask(__name__)

@app.route('/font/<font_name>', methods=['GET'])
def get_font_subset(font_name):
    font_path = f'fonts/{font_name}.ttf'
    chars = request.args.get('text', '')
    format = request.args.get('format', 'woff2').lower()

    unique_chars = ''.join(sorted(set(chars)))

    try:
        options = Options()
        options.flavor = format if format in {'woff', 'woff2'} else None
        options.desubroutinize = True

        subsetter = Subsetter(options=options)
        font = TTFont(font_path)
        subsetter.populate(text=unique_chars)
        subsetter.subset(font)

        buffer = BytesIO()
        font.save(buffer)
        buffer.seek(0)

        mime_type = {
            'woff2': 'font/woff2',
            'woff': 'font/woff',
        }[format]

        response = Response(buffer.read(), mimetype=mime_type)
        return response

    except Exception as e:
        print(f"Error: {e}")
        return "Error", 500

if __name__ == '__main__':
    app.run(debug=True)

2.按需加载

按需加载是指通过设置unicode-range属性，浏览器在进行CSS样式计算时，会根据页面中的字符与设置的字符范围进行比对，匹配上会加载对应的字体文件。这种方法适用于多语言切换的场景。

四、前端代码实现

在前端代码中，通过FontFace API动态加载字体资源。以下是前端代码的示例：

Toast.loading('字体加载中');
const fontFamilies = new Set(['字体1', '字体2', '字体3']);
const textMap = {
    '字体1': ['文案1', '文案2'],
    '字体2': ['文案3', '文案4'],
    '字体3': ['文案5', '文案6']
};

[...fontFamilies].forEach((fontName) => {
    const obj = fontLibrary.find((el) => el?.value === fontName) ?? {};
    if (obj.value && obj.src) {
        const text = textMap[obj.value].join('');
        const font = new FontFace(
            obj.value,
            `url(http://127.0.0.1:5000/font/${obj.value}?text=${text}&format=woff2)`
        );
        font.load();
        document.fonts.add(font);
    }
});

document.fonts.ready.finally(() => Toast.destroy());

五、优化效果

通过动态子集化，将实际22.4M的字体文件压缩到了3.6KB，实际效果图生成的时间从20秒以上缩减到了300毫秒以内。这显著提升了页面加载速度，改善了用户体验。

优化字体加载的方案有很多，但字体子集化和按需加载是两种非常高效且实用的手段。通过动态子集化，我们可以显著减少字体文件的体积，从而提升页面加载速度。如果你的项目中也面临字体文件过大的问题，不妨尝试一下这些优化方案。更多实践思路可以参考Google Fonts。