在页面开发中设计经常会使用一些比较好看的特殊字体，引用完整的中文字体库都比较大，加载性能非常差，所以我们提取部分我们使用到的字体，这样可以把字体文件变成几KB。

fontmin 是一个纯 JavaScript 字体子集化方案，支持提取部分文字、转换字体格式、生成 webfont 和对应 css 样式。

fontmin 安装

官网：http://ecomfe.github.io/fontmin

Github：https://github.com/ecomfe/fontmin

# 安装
npm install --save fontmin

使用方法

项目根目录创建 trans-fongt.js 文件

const Fontmin = require('fontmin')exports.transFontfile = (inputFile, outputDir, extractText) => (new Promise((res, rej) => {const fontmin = new Fontmin().src(inputFile).use(Fontmin.glyph({text: extractText,hinting: false, // keep ttf hint info (fpgm, prep, cvt). default = true})).dest(outputDir)fontmin.run((err, files) => {if (err) {rej(err)} else {res(files)}})
}))

vue.config.js 中

const { transFontfile } = require('./trans-font') // 原生完整的字体文件存放路径
const inputFile = path.resolve(__dirname, 'src/assets/font-input/HuXiaoBo-NanShen.ttf')// 抽取需要文字之后的字体文件存放路径
const outputDir = path.resolve(__dirname, 'src/assets/font')// 需要用到的特殊字体文字 例：项目系统名称
const extractText = ${process.env.VUE_APP_BASE_TITLE}transFontfile(inputFile, outputDir, extractText)

在原字体文件同级目录下创建 font.css 文件，使用 @font-face 引入字体

@font-face {font-family: 'HuXiaoBo-NanShen'; /* 重命名字体名 */src: url('../font/HuXiaoBo-NanShen.ttf'); /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */font-weight: normal;font-style: normal;
}

主入口文件（ main.js/app.vue）中引用 font.css 文件

// main.js中引用import '@dm/assets/font-input/font.css'

使用

.title {margin-right: 106px;font-family: HuXiaoBo-NanShen, sans-serif;font-size: 24px;font-weight: normal;color: rgba(255, 255, 255, 90%);
}

.gitignore 忽略切割后的字体文件

/src/assets/font