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

需求

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

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

方案说明

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

示例地址: 点我预览

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

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

方案优势：

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

实现步骤：

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

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

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

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

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