字体子集化应用

fontmin

fontmin 是一个基于Node.js的字体子集化工具，它可以将字体文件压缩为最小的子集，以便在Web应用程序中使用。它可以帮助减少字体文件的大小，提高页面加载速度，并减少带宽使用。

提取字体中指定字符集

参考百度 fontmin / 介绍

如何使用

1. npm 命令进行安装 fontmin

npm install fontmin

2. 创建内容文件夹,命名最好是字体名称，例如： DINPro \ youshebiaotihei \ yuwei【禹卫书法行数简体】

3. 文件夹下创建 content.txt 和 导入相关字体包文件， 格式 XXXX.ttf 这里我使用 禹卫书法行数简体 字体包，content.txt 中写入你需要应用字体的文字，例如： 信息技术标准

4. 【1】搭建环境、【2、3】准备物料。这一步我们编写脚具体脚本 如下代码：

<!-- convert.js  -->

/**
 *
 *
 * 使用方式
 * npm run font yuwei
 *
 *
 */

let Fontmin = require('fontmin')
let path = require('path')
let fs = require('fs')

let fontName = process.argv[2]   // node 命令，后面会介绍不止一种字体时的解决办法，主要是拿到 【1】中的字体目录名称
let srcPath = path.resolve('act-font/'+fontName)  // act-font 是我的项目一级目录。自己根据目录位置查找即可，主要是拿到 【1】 目录位置即可。

let srcFontPath = srcPath + '/font.ttf'  // 获取具体字体文件资源，这里拿到了 yuwei 的字体包路径
let contentPath = srcPath + '/content.txt'  // 同理，获取你需要处理的文字 【3】
let distPath = path.resolve('act-font/dist/' + fontName)  // 打包输出的文件位置，最终的输出文件存在这里

console.log('------ convert start ------')
console.log('srcFontPath:', srcFontPath)
console.log('contentPath:', contentPath)
console.log('distPath:', distPath)

let content = fs.readFileSync(contentPath,'utf8').toString()
console.log('content:', content)

let fontmin = new Fontmin().src(srcFontPath).dest(distPath)

console.log('srcFontPath:', srcFontPath)
fontmin
    .use(Fontmin.glyph({
        text: content,
        hinting: false         // keep ttf hint info (fpgm, prep, cvt). default = true
    }))
    .use(Fontmin.ttf2eot())
    .use(Fontmin.ttf2svg())
    .use(Fontmin.ttf2woff({
        deflate: true          // deflate woff. default = false
    }))
    .use(Fontmin.css({
        fontPath: './',         // location of font file
        base64: true,           // inject base64 data:application/x-font-ttf; (gzip font with css).
                                // default = false
        glyph: false,            // generate class for each glyph. default = false
        iconPrefix: 'my-icon',  // class prefix, only work when glyph is `true`. default to "icon"
        fontFamily: fontName,   // custom fontFamily, default to filename or get from analysed ttf file
        asFileName: false,      // rewrite fontFamily as filename force. default = false
        local: true             // boolean to add local font. default = false
    }))
    .run((err, files, stream) => {
        if (err) {
            throw err;
        }
        console.log('distPath:', distPath)
        console.log('------ convert success ------')
    })

5. 脚本编写完毕，可以直接使用 node 执行 convert.js 脚本，这里我们在 scripts 中封装一下命令，方便后续使用

// package.json 

"scripts": {
  "font": "node convert-font.js"
}

// 执行 `npm run font {字体名}`

// eg: npm run font yuwei

6. 执行完毕，可以看到在 dist 文件中输出了字体文件，这里我们使用 .ttf 文件即可。

7. 在第三方项目中引用，采用全局 CSS 样式引入

/* 全局CSS样式 */
/* yuwei.ttf 即 dist 目录下 yuwei/font.ttf 改名,为区分其他字体 */

@font-face {
  font-family: yuwei;
  src: url(${require('@assets/styles/yuwei.ttf').default}) format('truetype');
  font-style: normal;
}

.yu-wei {
  font-family: yuwei, Tahoma, Arial;
}


<div>这里是普通字体</div>
<div className="yu-wei">信息技术标准</div>

总结

fontmin 优点在于节省了字体文件包，在多字体场景下，按需加载，减少字体文件的大小，提高页面加载速度，并减少带宽使用。且不在局限于让UI切图。不足之处： 按需加载需要每次新增
文字的时候都要更新 content.txt 文件，并重新执行脚本，导入新的 .ttf 字体包。总体来说，是很不错的一款字体子集化应用库， Fontmin.js 是一个非常有用的工具，可以帮助网站或应用程序减小字体文件大小，提高页面加载速度。但是，需要注意的是，它可能会影响字体的外观，并需要额外的处理步骤。

试试AI对它的评价：
Fontmin.js 的优点包括：

减小字体文件大小：Fontmin.js 可以将一个大型字体文件压缩为仅包含所需字符的小型字体文件，从而减小字体文件的大小，提高页面加载速度。
灵活性：Fontmin.js 提供了多种方法，可以根据需要选择使用，例如 Fontmin.glyph()、Fontmin.ttf2eot() 和 Fontmin.ttf2woff() 等方法。
易于使用：Fontmin.js 的 API 简单易用，只需要几行代码就可以完成字体子集化的操作。

Fontmin.js 的缺点包括：

无法完全保留字体的外观：由于 Fontmin.js 只保留所需字符，因此可能会影响字体的外观，特别是对于一些复杂的字体。
需要额外的处理步骤：Fontmin.js 生成的字体文件需要额外的处理步骤，例如将其添加到 CSS 文件中，并确保在不同浏览器和设备上都能正常显示。

总的来说，Fontmin.js 是一个非常有用的工具，可以帮助网站或应用程序减小字体文件大小，提高页面加载速度。但是，需要注意的是，它可能会影响字体的外观，并需要额外的处理步骤。