以接口请求的方式，解决移动端页面中字体文件过大的问题

本文链接：https://blog.youkuaiyun.com/qq_36812165/article/details/108363511

针对移动端页面字体文件过大问题，本文提出一种解决方案：通过nodejs服务动态切割字体，实现按需加载。利用fontmin库将字体切割成KB级大小，减少对页面性能的影响，同时兼容各种项目。在服务端建立接口，前端通过POST请求获取字体文件URL，动态设置CSS样式。此外，介绍了如何配置nginx以解决跨域问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需求

背景：内容发布系统（想象一下今日头条的文章）面向移动端的文章，被要求使用思源宋体的字（客户付钱买的字体），2个字体文件加起来有30MB。

PS：中文字体发展落后英文字体，最大的一个原因就是字体包太大，第二原因是字太多，所以设计字体的人也少。。。不像英文26个字母，两者不是一个量级的。

方案说明

需要技术： js， nodejs，服务器一个，nginx

示例地址: 点我预览

github仓库：https://github.com/font-size/node-fontmin-project

核心：通过fontmin切割字体，一个原本十几MB（思源宋体）的字体通过切割基本可以达到几十KB的效果。

方案优势：

整套方案由纯js实现，轻量级应用
字体文件变成按需加载，量级从MB变成KB，切割后的大小不如一张普通的图
对现有项目的页面改动小，对各种类型的项目兼容性好
可以批量实现

实现步骤：

在服务端新增nodejs接口
前端页面新增请求post接口，根据返回的字体文件url，动态设置font-face等页面样式
示例如下

在这里插入图片描述

可以看到这个字体的size只有短短19.4kb，更令人惊喜的是，他是用接口实现的，也就是说，前端项目可以很方便的兼容。

从0开始架设node服务的步骤

起nodejs服务，开发一个js页面

下载nodejs安装包，在服务器上（或本地）安装
新建一个目录，输入npm init，然后一路确认，生成package.json。
接着npm安装依赖（fontmin，express，body-parser3个依赖包），代码分别是npm i fontmin --save,npm i express–save,npm i body-parser–save
开发逻辑代码（开发一个post接口）

nodejs代码

目录下新建express.js

// const fs = require('fs');
const fontmin = require('./fontmin')// 切割程序，后续会讲
const express = require('express');
const bodyParser = require('body-parser');
// 设置可用字体
const fonts = [
    {
   font: 'SourceHanSerifCN-Medium', name: '思源宋体'},
    {
   font: 'PangMenZhengDao', name: '庞门正道粗书体'},
    {
   font: 'RuiziGongfangMeiheiGBK', name: '锐字工房云字库美黑GBK'},
    {
   font: 'RuiziZhenyanti', name: '锐字真言体'},
    {
   font: 'YousheBiaotihei', name: '优设标题黑'},
    {
   font: 'Zihun116', name: '字魂116号-凤鸣手书'}
]

// express 实例
const app = express();

// 转化参数设置
app.use(bodyParser.json());

app.use(bodyParser.urlencoded({
   
    extended:true
}));

// post 接口
app.post('/getfontmin', function